vue-draggable-resizable-gorkys VUE拖拽组件！真实它！

应用于大屏可视化设计器的拖拽组件！！！

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

官网：

mirrors / gorkys / vue-draggable-resizable-gorkys · GitCode(GitCode)

GitHub - gorkys/vue-draggable-resizable-gorkys: Vue 用于可调整大小和可拖动元素的组件并支持冲突检测、元素吸附、元素对齐、辅助线(GitHub)

测试地址：

基 本 - 基 本 组 件 ⋅ Storybook (tingtas.com)

导入：

  npm：

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

全局引用：

main.js中添加以下引入配置

import Vue from 'vue'
import vdr from 'vue-draggable-resizable-gorkys'
import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'
Vue.component('vdr', vdr)

使用：

  vue

        组件配置字段详解

         <-- 拖拽组件 -->
         <vue-draggable-resizable
          :w="200"
          :h="200"
          :x="0"
          :y="0"
          :parent="true"
          :debug="false"
          :snap="true"
          :snapTolerance="10"
          :grid="[1,1]"
          :isConflictCheck="false"
          :prevent-deactivation="false"
          :resizable="false"
          :min-width="50"
          :min-height="50"
          :scale-ratio="0.7"
          @dragging="onDrag"
          @contextmenu.prevent.native="rightClick"
          @resizing="resizing"
          @activated="activated"
          @dragstop="dragstop"
          @refLineParams="getRefLineParams"
          class-name-active="active-class"
          :draggable="false"
          :active="true"
        >
          <div>
          <-- 内部组件 -->
          </div>
        </vue-draggable-resizable>

        <-- 对齐线 -->
        <span
          class="ref-line v-line"
          v-for="item in vLine"
          :style="{
              left: item.position,
              top: item.origin,
              height: item.lineLength
            }"
        />
        <span
          class="ref-line h-line"
          v-for="item in hLine"
          :style="{
              top: item.position,
              left: item.origin,
              width: item.lineLength
            }"
        />

注解：

   属性配置

          :w="200"
          :h="200"
          :x="0"
          :y="0"

此处 w,h,x,y分别为初始宽度、初始高度、初始X轴位置、初始Y轴位置

          :snap="true"
          :snapTolerance="10"

snap为是否开启贴合 而snapTolerance需要填入多少像素内让这两个组件贴合

          :grid="[1,1]"

grid为一个数组，第一个值为每次拖拽组件时，X轴横向移动的距离，第一个值为每次拖拽组件时，Y轴纵向移动的距离

          :isConflictCheck="false"

isConflictCheck表示是否可以让组件重叠，true表示不可以重叠，false表示可以重叠

          :resizable="false"

resizable表示 是否是可调整大小的

          :min-width="50"
          :min-height="50"

这里两个属性分别表示 调整大小的最小宽度以及最小高度

          :scale-ratio="0.7"

scale-ratio表示组件拖动百分比比例，如果是大屏设计器 根据调整大屏的比例设置这个值

         class-name-active="active-class"

class-name-active表示组件在激活状态下的CSS Class样式

          :draggable="false"

draggable表示组件是否时可拖动的

          :active="true"

active表示设置组件是否激活

          :parent="true"

parent属性表示 拖动不可超过父标签的范围

函数配置：

          @dragging="onDrag"

此函数为拖拽时会调用方法

          @contextmenu.prevent.native="rightClick"

此函数为右击时调用方法

          @resizing="resizing"

此函数为当调整大小时会调用方法

          @activated="activated"

此方法为当组件状态激活时调用方法

          @dragstop="dragstop"

此方法为当组件状态太取消激活时调用方法

          @refLineParams="getRefLineParams"

此方法为拖动时调用，但是只有在snap属性为true时调用

JS代码

getRefLineParams(params) {
      this.vLine = params.vLine;
      this.hLine = params.hLine;
    },

此方法为设置辅助对齐线的是否展示以及展示位置

主要方法只有此方法 其他方法均可由自己编写业务逻辑