free-dom

在线预览

vue2/3通用的自由拖拽dom的组件

支持独立使用和组合使用

独立使用可以提供最基本的位置移动及缩放功能

组合使用额外提供了拖拽区域的限制以及标线自动吸附功能

使用

1. 独立使用 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>

2. 组合使用 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时不会触发）

注意事项

1. [email protected]及以下需要安装@vue/composition-api才可以正常使用
2. custom-style本身就是一个样式，只不过组件会通过transform的translate以及width和height控制插槽内容的位置及大小
3. 组合使用时，操作区域由scene决定，会自动忽略limitHeight和limitWidth
4. limitHeight和limitWidth必须同时设置
5. preview的优先级比其它操作属性要高
6. 不同的vue版本双向绑定的语法糖不一样，具体可以参考上面的使用说明