vue draggable resizable 实现可拖拽缩放的组件功能

2020-06-14 06:26:19易采站长站整理

虽然之前适配过旧版组件,但是因为2.0版本原作者对代码进行了重构,原来修改的代码照搬是不可能的了。

所以也就一直没有将 冲突检测 以及 吸附对齐 功能适配到2.0版本,最近正好有时间就适配一下。

新增特征

冲突检测
吸附对齐
默认样式优化

功能预览

项目地址

github.com/gorkys/vue-…

如果喜欢该项目,欢迎 Star

新增Props

isConflictCheck

Type: Boolean

Required: false

Default: false

定义组件是否开启冲突检测。


<vue-draggable-resizable :is-conflict-check="true">

snap

Type: Boolean

Required: false

Default: false

定义组件是否开启元素对齐。


<vue-draggable-resizable :snap="true">

snapTolerance

Type: Number

Required: false

Default: 5

当调用 snap 时,定义组件与元素之间的对齐距离,以像素(px)为单位。


<vue-draggable-resizable :snap="true" :snap-tolerance="20">

其它属性请参考 vue-draggable-resizable 官方文档

安装使用


$ 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)

局部注册组件


<template>
<div style="height: 500px; width: 500px; border: 1px solid red; position: relative;">
<vdr :w="100" :h="100" v-on:dragging="onDrag" v-on:resizing="onResize" :parent="true">
<p>Hello! I'm a flexible component. You can drag me around and you can resize me.<br>
X: {{ x }} / Y: {{ y }} - Width: {{ width }} / Height: {{ height }}</p>
</vdr>
<vdr
:w="200"
:h="200"
:parent="true"
:debug="false"
:min-width="200"
:min-height="200"
:isConflictCheck="true"
:snap="true"
:snapTolerance="20"
>
</vdr>
</div>
</template>

<script>
import vdr from 'vue-draggable-resizable-gorkys'
import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'
export default {