用於可調整大小和可拖動元素的組件、並支持組件之間的沖突檢測和組件對齊。
使用流程：
安裝依賴：
npm install --save vue-draggable-resizable
注冊組件(在main.js中添加下列代碼)：
import Vue from 'vue' import VueDraggableResizable from 'vue-draggable-resizable' Vue.component('vue-draggable-resizable', VueDraggableResizable)
也可以在單個文件中使用該組件：
<template>
<div style="height: 500px; width: 500px; border: 1px solid red; position: relative;">
<vue-draggable-resizable :w="100" :h="100" v-on:dragging="onDrag" v-on:resizing="onResize" :parent="true">
<p>你可以進行拖拽和移動<br>
X坐標為: {{ x }};Y坐標為: {{ y }} <br> 寬為: {{ width }} ;高為: {{ 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 = x
this.y = y
this.width = width
this.height = height
},
onDrag: function (x, y) {
this.x = x
this.y = y
}
}
}
</script>
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時，定義組件與元素之間的對齊距離，以像素為單位。
<vue-draggable-resizable :snap="true" :snap-tolerance="20">active
Type: Boolean
Required: false
Default: false
確定組件是否應處於活動狀態。 prop對更改做出反應，也可以與syncmodifier 一起使用以保持狀態與父級同步。
<vue-draggable-resizable :active="true">draggable
Type: Boolean
Required: false
Default: true
定義組件應該是否可拖動。
<vue-draggable-resizable :draggable="false">resizable
Type: Boolean
Required: false
Default: true
定義組件是否可以調整大小。
<vue-draggable-resizable :resizable="false">w
Type: Number
Required: false
Default: 200
定義元素的初始寬度。
<vue-draggable-resizable :w="200">h
Type: Number
Required: false
Default: 200
定義元素的初始高度。
<vue-draggable-resizable :h="200">minw
Type: Number
Required: false
Default: 50
定義元素的最小寬度。
<vue-draggable-resizable :minw="50">minh
Type: Number
Required: false
Default: 50
定義元素的最小高度。
<vue-draggable-resizable :minh="50">x
Type: Number
Required: false
Default: 0
定義元素的初始x位置。
<vue-draggable-resizable :x="0">y
Type: Number
Required: false
Default: 0
定義元素的初始y位置。
<vue-draggable-resizable :y="0">z
Type: Number|String
Required: false
Default: auto
定義元素的zIndex。
<vue-draggable-resizable :z="999">handles
Type: Array
Required: false
Default: ['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml']
定義句柄數組以限制元素大小調整：
tl- 左上角tm- 中上方tr- 右上角mr- 右中方br- 右下角bm- 下中方bl- 左下方ml- 左中方
<vue-draggable-resizable :handles="['tm','bm','ml','mr']">axis
Type: String
Required: false
Default: both
定義元素可拖動的軸。可用值為x, y 或者 both.
<vue-draggable-resizable axis="x">grid
Type: Array
Required: false
Default: [1,1]
定義捕捉元素的網格。
<vue-draggable-resizable :grid="[1,1]">parent
Type: Boolean
Required: false
Default: false
將元素的移動和尺寸限制為父元素。
<vue-draggable-resizable :parent="true">dragHandle
Type: String
Required: false
定義應該用於拖動組件的選擇器。
<vue-draggable-resizable drag-handle=".drag">dragCancel
Type: String
Required: false
定義應該用於阻止拖動初始化的選擇器。
<vue-draggable-resizable drag-cancel=".drag">maximize
Type: Boolean
Required: false
Default: false
如果設置為true，則允許組件在雙擊時填充其父級。
<vue-draggable-resizable :maximize="true">Events
activated
Required: false
Parameters: -
單擊組件時調用，以顯示句柄。
<vue-draggable-resizable @activated="onActivated">deactivated
Required: false
Parameters: -
每當用戶單擊組件外的任何位置時調用，以便停用它。
<vue-draggable-resizable @deactivated="onDeactivated">resizing
Required: false
Parameters:
left元素的X位置top元素的Y位置width元素的寬度height元素的高度
每當組件調整大小時調用。
<vue-draggable-resizable @resizing="onResizing">resizestop
Required: false
Parameters:
left元素的X位置top元素的Y位置width元素的寬度height元素的高度
每當組件停止調整大小時調用。
<vue-draggable-resizable @resizestop="onResizstop">dragging
Required: false
Parameters:
left元素的X位置top元素的Y位置
每當拖動組件時調用。
<vue-draggable-resizable @dragging="onDragging">dragstop
Required: false
Parameters:
left元素的X位置top元素的Y位置
每當組件停止拖動時調用。
<vue-draggable-resizable @dragstop="onDragstop">