vue-drag-resize 全解，vue拖拽縮放元件

程式碼星空發表於2018-11-14
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>
      <div id="app">
      <vue-drag-resize></vue-drag-resize>
  </template>
  import VueDragResize from 'vue-drag-resize';
  export default {
      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 - Top left
tm - Top middle
tr - Top right
mr - Middle right
br - Bottom right
bm - Bottom middle
bl - Bottom left
ml - Middle left
複製程式碼

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 的設計問題，在元素內部只能觸發本元素，如果是有表單元素，只能被動的觸發；解決：

 <vue-drag-resize @activated="activateEv(index)" />
 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定製化平臺。一步一步總可以實現的，加油鴨?

相關文章