应用于大屏可视化设计器的拖拽组件!!!
说明: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;
},
此方法为设置辅助对齐线的是否展示以及展示位置
主要方法只有此方法 其他方法均可由自己编写业务逻辑