首页 > 编程 > JavaScript > 正文

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

2019-11-19 11:11:07
字体:
来源:转载
供稿:网友

虽然之前适配过旧版组件,但是因为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.jsimport 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 实现可拖拽缩放的组件功能 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表