说明

基于vue-draggable-resizable的fork版本，修复了官方版本的一些bug，新增了辅助线、元素对齐、冲突检测、吸附对齐等功能。

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

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

新增特征✨

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

功能预览

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

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

新增Props

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

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

<vue-drag-subline :handle-info="{size: 14,offset: -5,switch: true}" />

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

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

<vue-drag-subline :scale-ratio="0.6" />

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

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

<vue-drag-subline :is-conflict-check="true" />

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

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

<vue-drag-subline :snap="true" />

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

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

<vue-drag-subline :snap="true" :snap-tolerance="20" />

新增Events

refLineParams 参数: params

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

<div>
  <vue-drag-subline :snap="true" :snap-tolerance="20" @refLineParams="getRefLineParams" />
  <vue-drag-subline :snap="true" :snap-tolerance="20" @refLineParams="getRefLineParams" />
  <span class="ref-line v-line"
      v-for="item in vLine"
      v-show="item.display"
      :style="{ left: item.position, top: item.origin, height: item.lineLength}"
  />
  <span class="ref-line h-line"
      v-for="item in hLine"
      v-show="item.display"
      :style="{ top: item.position, left: item.origin, width: item.lineLength}"
  />
</div>

<script>
import VueDragSubline from 'vue-drag-subline'
import 'vue-drag-subline/dist/VueDragSubline.css'

export default {
  name: 'app',
  components: {
    VueDragSubline
  },
  data () {
    return {
      vLine: [],
      hLine: []
    }
  },
  methods: {
    getRefLineParams (params) {
      const { vLine, hLine } = params
      this.vLine = vLine
      this.hLine = hLine
    }
  }
}
</script>

其它属性

英文版

注意：英文版为官方原版

安装使用

$ npm install --save vue-drag-subline

全局注册组件

//main.js
import Vue from 'vue'
import VueDragSubline from 'vue-drag-subline'

// 导入默认样式
import 'vue-drag-subline/dist/VueDragSubline.css'
Vue.component('VueDragSubline', VueDragSubline)

局部注册组件

<template>
  <div style="height: 500px; width: 500px; border: 1px solid red; position: relative;">
    <vue-drag-subline :w="100" :h="100" v-on:dragging="onDrag" v-on:resizing="onResize" :parent="true">
      <p>Hello! I'm a flexible component. You can drag me around and you can resize me.<br>
      X: {{ x }} / Y: {{ y }} - Width: {{ width }} / Height: {{ height }}</p>
    </vue-drag-subline>
    <vue-drag-subline
      :w="200"
      :h="200"
      :parent="true"
      :debug="false"
      :min-width="200"
      :min-height="200"
      :isConflictCheck="true"
      :snap="true"
      :snapTolerance="20"
    >
    </vue-drag-subline>
  </div>
</template>

<script>
import VueDragSubline from 'vue-drag-subline'
import 'vue-drag-subline/dist/VueDragSubline.css'
export default {
  components: {VueDragSubline},
  data: function () {
    return {
      width: 0,
      height: 0,
      x: 0,
      y: 0
    }
  },
  methods: {
    onResize: function (x, y, width, height) {
      this.x = x
      this.y = y
      this.width = width
      this.height = height
    },
    onDrag: function (x, y) {
      this.x = x
      this.y = y
    }
  }
}
</script>