qn-drag v0.1.2

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

使用流程

安装依赖

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>