vue-drag-resize 全解,vue拖拽縮放組件

vue-drag-resize是一個支持拖拽與縮放的vue插件,支持vue 1.x與2.x,使用方便,上手便利,具有以下的幾個特征:

特征

輕量級,無依賴性

所有的操作都是可聯動的

支持觸摸事件

定義元素可拖拽,或者可縮放,或者二者兼有

提供用于調整大小的操作點與操作框

可以按照比例縮放或者不按照比例縮放元素

可限制拖拽的最大與最小值、拖拽的范圍是否超出其父元素

可限制拖動的方向為垂直或水平軸

gitHib地址:?github.com/kirillmuras…

用法

$ npm i -s vue-drag-resize

注冊為全局組件,在vue項目中注冊:

import Vue from 'vue' import VueDragResize from 'vue-drag-resize' Vue.component('vue-drag-resize', VueDragResize) 在任何組件中使用的時候,不用引入直接;

<vue-drag-resize:isActive = 'true'>

在需要的組件中引入:

? <template>

importVueDragResizefrom'vue-drag-resize';

exportdefault{

name:'app',

components: {

? ? ? ? ? VueDragResize

? ? ? },

? }

復制代碼

屬性

isActive 是否激活狀態

Type: Boolean || Required: false || Default: false

處于激活狀態的組件才能進行拖拽與縮放等操作,狀態呈現激活狀態

isDraggable 是否允許拖拽

Type: Boolean || Required: false || Default: true

isResizable 是否允許縮放

Type: Boolean || Required: false || Default: true

aspectRatio 是否等比例縮放

Type: Boolean || Required: false || Default: false

設置為true,則會按照元素的元比例縮放。坑:定義了這個屬性,發現重新設置寬高的時候出現了異常(新值比例不同于舊值),需要在重設寬高的時候把aspectRatio設置為false,再將其設置回去,才能保證新值的等比例

w 組件寬度

Type: Number || Required: false || Default: 200

h 組件高度

Type: Number || Required: false || Default: 200

minw 最小寬度

Type: Number || Required: false || Default: 50

注意,不能設置為0,因為這個組件里面屬性要求大于0

minh 最小高度

Type: Number || Required: false || Default: 50

注意,不能設置為0,因為這個組件里面屬性要求大于0

x 定位left

Type: Number || Required: false || Default: 0

y 定位top

Type: Number || Required: false || Default: 0

z 層級

Type: Number || Required: false || Default: auto

注意在元素激活的時候,z會被設置為最高的,所以在管理z的時候要注意

sticks 元素縮放的節點定義

Type: Array || Required: false || Default: ['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml']

tl -Topleft

tm -Topmiddle

tr-Topright

mr - Middleright

br-Bottomright

bm -Bottommiddle

bl -Bottomleft

ml - Middleleft

復制代碼

preventActiveBehavior 單擊組件外區域來禁止組件行為

Type: Boolean || Required: false || Default: false

設置這個屬性true,就可以解決在其他區域操作返回到組件區域的時候,不需要再次點擊就激活組件

parentLimitation 是否超出父級元素

Type: Boolean || Required: false || Default: false

設置為true,則限制操作組件不能超出父級元素

parentW 父級寬度

Type: Number || Required: false || Default: 0

該值限制了元素可以拖動的水平最大寬度,前提是parentLimitation=true

parentH 父級高度

Type: Number || Required: false || Default: 0

該值限制了元素可以拖動的水平最大高度,前提是parentLimitation=true

parentScaleX

Type: Number || Required: false || Default: 1

parentScaleY

Type: Number || Required: false || Default: 1

axis 允許拖拽的方向,

Type: String || Required: false || Default: both

取值可以為x、 y、 both、none

dragHandle 定義拖拽時的classname

Type: String || Required: false

dragCancel 定義取消拖拽時的classname

Type: String || Required: false

事件

clicked 組件點擊事件

Required: false || Parameters: 組件實例

activated 點擊組件外事件

Required: false || Parameters: 無

resizing 縮放時事件

Required: false || Parameters: object

{

left:Number,//the X position of the component

top:Number,//the Y position of the component

width:Number,//the width of the component

height:Number//the height of the component

}

復制代碼

resizestop 縮放結束

Required: false || Parameters: object

object 同resizing的object

dragging 拖拽時事件

Required: false || Parameters: object

object 同resizing的object

dragstop 拖拽結束事件

Required: false || Parameters: object

object 同resizing的object

issues

在拖拽元素里面添加input等類似的表單性元素,無法正常點擊操作,特別是focus無法做到,click也是經常失效[攤手]

vue-drag-resize 的設計問題,在元素內部只能觸發本元素,如果是有表單元素,只能被動的觸發;解決:

activateEv(index) {

console.log('activateEv'+index);

this.$refs['drag-input'].focus();

? }

復制代碼

怎么修改使點擊組件外面后,不需要點擊組件才能進行?

:preventActiveBehavior="true" 設置這個屬性,禁用點擊組件外事件

更新計劃

設置了組件的minh與minw,使用過程后臺一直報警告

minh跟minw注意臨界值。默認是50,查看源碼發現必須要大于0 ,不能為0,這就是大部分開發人員后臺報警告的原因。當然,如果想要設置為0,可以重新定義屬性校驗規則

多個拖拽元素,之前如何做到互斥?看github上的例子是互斥的,實際用起來發現經常性的無法互斥[攤手]

最佳的解決方案是使用數據去管理這些互斥的元素,可以在父級設置數據管理,或者引入vuex進行數據管理。關鍵點在點擊,拖拽,失焦的時候,做到對數據的精確管理

如何管理多個拖拽元素之間的zIndex?

這是必定會遇到并且無法逃避的一個問題,操作上需要保持當前激活的組件是最上層,但是在總體上,又要確保其圖層管理的初始。維護zIndex,并且注意在刪除與置換層級的時候對應的數據修改。如果被激活,就設定為一個最大的值,失去激活狀態,要恢復到初始值。

這個組件使用簡單,清楚明了,我自己在用的時候,就是上手很快,但是要如何良好的應用它,以及處理一些異常的情況下,還是有很多的坑。基于這個組件,我實現了一個編輯器的平臺,后續會更新這個組件更實用的一些應用實例,以及如何與vuex結合,實現一個基礎的h5編輯器平臺。再結合一些設置與多媒體的處理,即可以實現諸如易企秀、Maka等這種h5定制化平臺。一步一步總可以實現的,加油鴨?

轉載于:https://juejin.im/post/5beb9423e51d4577f96e8d24

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容