VueDraggableResizable 2

该fork版本修复的问题清单：

• fix：增加右键菜单事件contextmenu 2021-08-10
• fix：开启自动对齐后，元素依据中线对齐可能会超出父容器边界的问题 2021-07-02
• fix：取消选中的行为优先绑定在父节点上 2021-06-22
• fix：冲突检测回退后没有再次触发resizing事件的bug 2021-06-08

新增特征✨

• 辅助线(新)
• 元素对齐(新)
• 冲突检测
• 吸附对齐
• 默认样式优化

Q交流群：138146781

说明

说明：组件基于vue-draggable-resizable进行二次开发

距离上1.7版本版本的修改已经过去快一年的时间了，原版组件在之前已经更新到了2.0版本。

虽然之前适配过旧版组件，但是因为2.0版本原作者对代码进行了重构，原来修改的代码照搬是不可能的了。

所以也就一直没有将冲突检测以及吸附对齐功能适配到2.0版本，最近正好有时间就适配一下。

功能预览

英文版演示地址 | 中文版演示地址

注意：英文版为官方原版，没有新增功能的演示。中文版为google翻译版本，新增功能在高级目录下可查看

新增Props

handleInfo
类型: Object
必需: false
默认: { size: 8, offset: -5, switch: true }

当使用transform:scale()进行缩放操作时，其中switch为是否让handle始终保持视觉效果不变,size为handle的大小(宽高相同), offset为handle的位置偏移，通常在自定义handle样式时需要设置。

1<vue-draggable-resizable :handle-info="{size: 14,offset: -5,switch: true}" />

scaleRatio
类型: Number
必需: false
默认: 1

当使用transform:scale()进行缩放操作时，用来修复操作组件时鼠标指针与移动缩放位置有所偏移的情况

详见:Issues

1<vue-draggable-resizable :scale-ratio="0.6" />

isConflictCheck
类型: Boolean
必需: false
默认: false

定义组件是否开启冲突检测。

1<vue-draggable-resizable :is-conflict-check="true" />

snap
类型: Boolean
必需: false
默认: false

定义组件是否开启元素对齐。

1<vue-draggable-resizable :snap="true" />

snapTolerance
类型: Number
必需: false
默认: 5

当调用snap时，定义组件与元素之间的对齐距离，以像素(px)为单位。

1<vue-draggable-resizable :snap="true" :snap-tolerance="20" />

新增Events

refLineParams
参数: params

返回参数是一个Object,里面包含vLine与hLine，具体使用参考下面代码。

1<div>
2  <vue-draggable-resizable :snap="true" :snap-tolerance="20" @refLineParams="getRefLineParams" />
3  <vue-draggable-resizable :snap="true" :snap-tolerance="20" @refLineParams="getRefLineParams" />
4  <span class="ref-line v-line"
5      v-for="item in vLine"
6      v-show="item.display"
7      :style="{ left: item.position, top: item.origin, height: item.lineLength}"
8  />
9  <span class="ref-line h-line"
10      v-for="item in hLine"
11      v-show="item.display"
12      :style="{ top: item.position, left: item.origin, width: item.lineLength}"
13  />
14</div>
15
16<script>
17import VueDraggableResizable from 'vue-draggable-resizable'
18import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'
19
20export default {
21  name: 'app',
22  components: {
23    VueDraggableResizable
24  },
25  data () {
26    return {
27      vLine: [],
28      hLine: []
29    }
30  },
31  methods: {
32    getRefLineParams (params) {
33      const { vLine, hLine } = params
34      this.vLine = vLine
35      this.hLine = hLine
36    }
37  }
38}
39</script>
40

其它属性

英文版 | 中文版

注意：英文版为官方原版，中文版为google翻译版本

安装使用

1$ npm install --save vue-draggable-resizable-gorkys

全局注册组件

1//main.js
2import Vue from 'vue'
3import vdr from 'vue-draggable-resizable-gorkys'
4
5// 导入默认样式
6import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'
7Vue.component('vdr', vdr)

局部注册组件

1<template>
2  <div style="height: 500px; width: 500px; border: 1px solid red; position: relative;">
3    <vdr :w="100" :h="100" v-on:dragging="onDrag" v-on:resizing="onResize" :parent="true">
4      <p>Hello! I'm a flexible component. You can drag me around and you can resize me.<br>
5      X: {{ x }} / Y: {{ y }} - Width: {{ width }} / Height: {{ height }}</p>
6    </vdr>
7    <vdr
8      :w="200"
9      :h="200"
10      :parent="true"
11      :debug="false"
12      :min-width="200"
13      :min-height="200"
14      :isConflictCheck="true"
15      :snap="true"
16      :snapTolerance="20"
17    >
18    </vdr>
19  </div>
20</template>
21
22<script>
23import vdr from 'vue-draggable-resizable-gorkys'
24import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'
25export default {
26  components: {vdr},
27  data: function () {
28    return {
29      width: 0,
30      height: 0,
31      x: 0,
32      y: 0
33    }
34  },
35  methods: {
36    onResize: function (x, y, width, height) {
37      this.x = x
38      this.y = y
39      this.width = width
40      this.height = height
41    },
42    onDrag: function (x, y) {
43      this.x = x
44      this.y = y
45    }
46  }
47}
48</script>

License

The MIT License (MIT). Please see License File for more information.