vue draggable resizable 实现可拖拽缩放的组件功能
(编辑:jimmy 日期: 2024/11/2 浏览:3 次 )
虽然之前适配过旧版组件,但是因为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 { components: {vdr}, data: function () { return { width: 0, height: 0, x: 0, y: 0 } }, methods: { onResize: function (x, y, width, height) { this.x = x this.y = y this.width = width this.height = height }, onDrag: function (x, y) { this.x = x this.y = y } } } </script>
总结
以上所述是小编给大家介绍的vue draggable resizable 实现可拖拽缩放的组件功能 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
下一篇:微信小程序如何使用canvas二维码保存至手机相册