0.13.2 • Published 10 months ago
@sepveneto/free-dom v0.13.2
free-dom
vue2/3通用的自由拖拽dom的组件
支持独立使用和组合使用
独立使用可以提供最基本的位置移动及缩放功能
组合使用额外提供了拖拽区域的限制以及标线自动吸附功能
使用
- 独立使用 vue2.6及以下
<template>
<free-dom
:custom-style.sync="style"
move
scale
>测试文本</free-dom>
</template>
<script>
import { freeDom } from 'free-dom'
import 'free-dom/dist/theme.css'
export default {
component: {
freeDom
},
data() {
return {
style: { transform: 'translate(50px, 50px)' }
}
}
}
</script>
vue2.7及以上
<template>
<free-dom
v-model:custom-style="style"
move
scale
>测试文本</free-dom>
</template>
<script setup>
import { freeDom } from 'free-dom'
import 'free-dom/dist/theme.css'
import { ref } from 'vue'
const style = ref({ tranform: 'translate(50px, 50px)' })
</script>
- 组合使用 vue2.6及以下
<template>
<free-scene style="width: 600px; height: 400px;" move scale>
<free-dom :custom-style.sync="style">测试文本</free-dom>
</free-scene>
</template>
<script>
import { freeDom, freeScene } from 'free-dom'
import 'free-dom/dist/theme.css'
export default {
components: {
freeDom,
freeScene,
},
data() {
return {
style: {}
}
}
}
</script>
vue2.7及以上
<template>
<free-scene style="width: 600px; height: 400px;" move scale>
<free-dom v-model:custom-style="style">测试文本</free-dom>
</free-scene>
</template>
<script setup>
import { freeDom, freeScene } from 'free-dom'
import 'free-dom/dist/theme.css'
import { ref } from 'vue'
const style = ref({ tranform: 'translate(50px, 50px)' })
</script>
组件说明
FreeScene
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
move | boolean | false | 是否允许移动 |
scale | boolean,Array | false | 是否允许缩放,可以通过数组控制缩放的方向 |
preview | boolean | false | 屏蔽移动和缩放操作 |
diff | number | 3 | 自动吸附的像素距离 |
FreeDom
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
custom-style | css properties | - | 通过translate ,width ,height 控制dom的位置和大小 |
limitWidth | number | - | 限制dom的可操作区域 |
limitHeight | number | - | 限制dom的可操作区域 |
move | boolean | false | 是否允许移动 |
scale | boolean,Array | false | 是否允许缩放,可以通过数组控制缩放的方向 |
preview | boolean | false | 屏蔽移动和缩放操作 |
diff | number | 3 | 自动吸附的像素距离 |
事件 | 参数 | 说明 |
---|---|---|
update:custom-style | css properties | 直接返回样式,不需要做转换 |
select | { x: number, y: number, width: number, height: number } | 当dom被选中时触发,参数包含相关的位置大小信息(preview 时不会触发) |
注意事项
vue@2.6.14
及以下需要安装@vue/composition-api
才可以正常使用custom-style
本身就是一个样式,只不过组件会通过transform
的translate
以及width
和height
控制插槽内容的位置及大小- 组合使用时,操作区域由
scene
决定,会自动忽略limitHeight
和limitWidth
limitHeight
和limitWidth
必须同时设置preview
的优先级比其它操作属性要高- 不同的
vue
版本双向绑定的语法糖不一样,具体可以参考上面的使用说明
0.13.1
10 months ago
0.13.2
10 months ago
0.13.0
10 months ago
0.12.7
11 months ago
0.12.8
11 months ago
0.12.5
11 months ago
0.12.6
11 months ago
0.12.1
1 year ago
0.12.2
1 year ago
0.12.0-beta.2
1 year ago
0.12.0
1 year ago
0.12.0-beta.0
1 year ago
0.11.8
1 year ago
0.11.7
2 years ago
0.11.6
2 years ago
0.11.3
2 years ago
0.11.4
2 years ago
0.11.5
2 years ago
0.11.1
2 years ago
0.11.0
2 years ago
0.10.0
2 years ago
0.7.0-alpha.2
2 years ago
0.10.1
2 years ago
0.9.0
2 years ago
0.7.2
2 years ago
0.8.0
2 years ago
0.7.4
2 years ago
0.9.1
2 years ago
0.7.3
2 years ago
0.6.0
2 years ago
0.3.0
2 years ago
0.2.0
2 years ago
0.4.0-beta.0
2 years ago
0.5.0
2 years ago
0.4.1
2 years ago
0.4.0
2 years ago
0.4.3
2 years ago
0.5.1
2 years ago
0.4.2
2 years ago
0.0.7
3 years ago
0.0.6
3 years ago