vue-drag-resize是一個支持拖拽與縮放的vue插件
特征
- 輕量級，無依賴性
- 所有的操作都是可聯動的
- 支持觸摸事件
- 定義元素可拖拽，或者可縮放，或者二者兼有
- 提供用於調整大小的操作點與操作框
- 可以按照比例縮放或者不按照比例縮放元素
- 可限制拖拽的最大與最小值、拖拽的范圍是否超出其父元素
- 可限制拖動的方向為垂直或水平軸
用法：$ npm i -s vue-drag-resize 然后全局引入或者按需引入
屬性
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" 設置這個屬性，禁用點擊組件外事件
from：https://blog.csdn.net/weixin_33957648/article/details/91423751?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-2.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-2.control