0.13.2 • Published 10 months ago

@sepveneto/free-dom v0.13.2

Weekly downloads
-
License
ISC
Repository
github
Last release
10 months ago

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>
  1. 组合使用 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

属性类型默认值说明
movebooleanfalse是否允许移动
scaleboolean,Arrayfalse是否允许缩放,可以通过数组控制缩放的方向
previewbooleanfalse屏蔽移动和缩放操作
diffnumber3自动吸附的像素距离

FreeDom

属性类型默认值说明
custom-stylecss properties-通过translate,width,height控制dom的位置和大小
limitWidthnumber-限制dom的可操作区域
limitHeightnumber-限制dom的可操作区域
movebooleanfalse是否允许移动
scaleboolean,Arrayfalse是否允许缩放,可以通过数组控制缩放的方向
previewbooleanfalse屏蔽移动和缩放操作
diffnumber3自动吸附的像素距离
事件参数说明
update:custom-stylecss properties直接返回样式,不需要做转换
select{ x: number, y: number, width: number, height: number }当dom被选中时触发,参数包含相关的位置大小信息(preview时不会触发)

注意事项

  1. vue@2.6.14及以下需要安装@vue/composition-api才可以正常使用
  2. custom-style本身就是一个样式,只不过组件会通过transformtranslate以及widthheight控制插槽内容的位置及大小
  3. 组合使用时,操作区域由scene决定,会自动忽略limitHeightlimitWidth
  4. limitHeightlimitWidth必须同时设置
  5. preview的优先级比其它操作属性要高
  6. 不同的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