1.在vue项目中安装
npm install --save vue-draggable-resizable
2.注册
全局注册组件main.js中写入
import Vue from 'vue'
import VueDraggableResizable from 'vue-draggable-resizable'
// 可选择导入默认样式
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
Vue.component('vue-draggable-resizable', VueDraggableResizable)
局部注册:在使用的组件里引入
import VueDraggableResizable from 'vue-draggable-resizable'
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
在需要的组件中引入
<template>
<div id="app">
<vue-drag-resize></vue-drag-resize>
</template>
import VueDragResize from 'vue-drag-resize';
export default {
name: 'app',
components: {
VueDragResize
},
}
3.使用
<vue-draggable-resizable
:parent="true"// 限制不能拖出父元素
:draggable="true"//可拖拽
:resizable="true"// 可缩放
:w="495"// 默认宽度
:h="384" //默认高度
:min-width="380"//最小宽度
:min-height="240"//最小高度
class="risk-remind">
</vue-draggable-resizable>
常用属性
:w 默认宽度
:h 默认高度
:x="50" 默认水平坐标 注意相对元素是谁
:y="50" 默认垂直最表 注意相对元素是谁
:min-width="50" 最小宽度
:min-height="50" 最小高度
:parent="true" 限制不能拖出父元素
parent=".p-event" 限制不能拖出class为p-event的元素
:grid 水平和垂直移动 每次分别能够走多少像素
class-name 自定义组件class 下面定义一个dragging1
常用事件
@dragging="onDrag" 每当拖动组件时调用。
@resizing="onResize" 每当组件调整大小时调用。
@dragstop="onDragstop" 每当组件停止拖动时调用。
@resizestop="onResizstop" 每当组件停止调整大小时调用
@deactivated="onDeactivated" 每当用户单击组件外的任何位置时调用
@activated="onActivated" 单击组件时调用,以显示句柄。备注:句柄就是点击组件后上下左右的可以拉伸的方块点