用于可调整大小和可拖动元素的组件、并支持组件之间的冲突检测和组件对齐。

使用流程

安装依赖

npm install --save qn-drag

注册组件(在main.js中添加下列代码)

import qnDrag from 'qn-drag'
import 'qn-drag/lib/qn-drag.css'
Vue.use(qnDrag);

在文件中使用该组件：

<template>
  <div class="hello">
    <div class="parent-box">


      <qn-drag :snapTolerance="10" :isConflictCheck="true"
               :snap="true" @refLineParams="getRefLineParams" style="background-color: red"  :parent="true"
               :is-conflict-check="true"
      >
        <p>Grid 20x20 starting from the top-left corner</p>
      </qn-drag>

      <qn-drag :snapTolerance="10" :isConflictCheck="true"
               :snap="true" @refLineParams="getRefLineParams" style="background-color: blueviolet" :grid=[20,20]
               :parent="true"
               :is-conflict-check="true">
        <p>Grid 20x20 starting from the top-left corner</p>
      </qn-drag>

      <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>
  </div>
</template>

<script>


export default {

  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      vLine: [],
      hLine: []
    }
  },
  /**
   * 页面调用函数
   * @type {Object}
   */
  methods: {
    /**
     * 设置辅助线
     * @param params
     */
    getRefLineParams(params) {
      console.log("params", params)
      const {vLine, hLine} = params
      this.vLine = vLine
      this.hLine = hLine
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.parent-box {
  position: relative;
  width: 800px;
  height: 700px;
  background: linear-gradient(-90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px) 0% 0% / 20px 20px, linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px) 0% 0% / 20px 20px;
}

.v-line {
  width: 1px;
  height: 1px;
}

.ref-line {
  position: absolute;
  background-color: rgb(255, 0, 204);
  z-index: 9999;
}
</style>

| 参数 | 说明 | 类型 | 必填项 | 默认值 | 备注 | |-----------------|------------------------------------------------------------|---------|-------|-------|----| | isConflictCheck | 定义组件是否开启冲突检测 | Boolean | false | false | | | snap | 定义组件是否开启元素对齐 | Boolean | false | false | | | snapTolerance | 当调用snap时，定义组件与元素之间的对齐距离，以像素为单位 | Number | false | 5 | | | active | 确定组件是否应处于活动状态。 prop对更改做出反应，也可以与syncmodifier 一起使用以保持状态与父级同步 | Boolean | false | false | | | draggable | 定义组件应该是否可拖动 | Boolean | false | true | | | resizable | 定义组件是否可以调整大小 | Boolean | false | true | | | w | 定义元素的初始宽度 | Number | false | 200 | | | h | 定义元素的初始高度 | Number | false | 200 | | | minw | 定义元素的最小宽度 | Number | false | 50 | | | minh | 定义元素的最小高度 | Number | false | 50 | | | x | 定义元素的初始x位置 | Number | false | 0 | | | y | 定义元素的初始y位置 | Number | false | 0 | | | z | 定义元素的zIndex | Number | false | auto | | | axis | 定义元素可拖动的轴。可用值为x, y 或者 both | String | false | both | | | grid | 定义捕捉元素的网格 | Array | false | [1,1] | | | parent | 将元素的移动和尺寸限制为父元素 | Array | false | false | | | Events | 单击组件时调用，以显示句柄 |- | false | - | @Events | | deactivated | 定义捕捉元素的网格 | - | false | - | @activated | | resizing | 每当组件调整大小时调用 | - | false | - | @resizing | | resizestop | 每当组件停止调整大小时调用 | - | false | - | @resizestop | | dragging | 每当拖动组件时调用 | - | false | - | @dragging | | dragstop | 每当组件停止拖动时调用 | - | false | - | @dragstop |