此组件是Vue 用于可调整大小和可拖动元素并支持冲突检测、元素吸附、元素对齐、辅助线。
文档/vue-draggable-resizable-gorkys1、安装
npm install --save vue-draggable-resizable
2、引入组件
import Vue from 'vue'import VueDraggableResizable from 'vue-draggable-resizable'// optionally import default stylesimport 'vue-draggable-resizable/dist/VueDraggableResizable.css'ponent('vue-draggable-resizable', VueDraggableResizable)
3、使用
<template><div style="height: 500px; width: 500px; border: 1px solid red; position: relative;"><vue-draggable-resizable :w="100" :h="100" @dragging="onDrag" @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></vue-draggable-resizable></div></template><script>import VueDraggableResizable from 'vue-draggable-resizable'export default {data: function () {return {width: 0,height: 0,x: 0,y: 0}},methods: {onResize: function (x, y, width, height) {this.x = xthis.y = ythis.width = widththis.height = height},onDrag: function (x, y) {this.x = xthis.y = y}}}</script>
:w 默认宽度
:h 默认高度
:x="50" 默认水平坐标 注意相对元素是谁
:y="50" 默认垂直最表 注意相对元素是谁
:min-width="50" 最小宽度
:min-height="50" 最小高度
:parent="true" 限制不能拖出父元素
parent=".p-event" 限制不能拖出class为p-event的元素
:grid 水平和垂直移动 每次分别能够走多少像素
