qn-drag

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

使用流程

安装依赖

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