vue3 寫一個簡單的拖拽指令

vue3 的指令對比vue 2的變更，官方給出兩點總結(目前)

• API 已重命名，以便更好地與組件生命周期保持一致
• 自定義指令將由子組件通過 v-bind="$attrs

1. vue3 指令的最終api 

const MyDirective = {
  beforeMount(el, binding, vnode, prevVnode) {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  beforeUnmount() {}, // 新
  unmounted() {}
}

 

2. 基於面向對象寫的拖拽

class Drap{
    static zIndex = 1;
    constructor(el,option={}){
        this.el = el;
        this.x=0;
        this.y=0;
        this.option = option;
        this.init();
    }
    init(){
        this.setEleStyle(this.option||{});
        this.el.onmousedown =(e)=>{
            this.onMouseDown(e)
            this.el.setCapture&&this.el.setCapture() //全局捕獲
            return false
        }
       
    }
    //樣式設置
    setEleStyle(option){
        for (const key in option) {
            this.el.style[key] = option[key]
        }
    }

    //按下ele
    onMouseDown(e){
        let zIndex = getComputedStyle(this.el).getPropertyValue('z-index');
        zIndex=isNaN(zIndex)?1:zIndex
        Drap.zIndex =Drap.zIndex>zIndex?Number(Drap.zIndex)+1:Number(zIndex)+1
        this.setEleStyle({"zIndex":Drap.zIndex,position:'fixed','cursor': 'move'})
        this.x = e.clientX-this.el.offsetLeft;
        this.y= e.clientY-this.el.offsetTop;
        document.onmousemove=(e)=>this.onMouseMove(e);
        document.onmouseup = (e)=>this.onMouseUp(e)
    }
    //移動move
    onMouseMove(e){
        let X = e.clientX-this.x
        let Y = e.clientY-this.y;
        if(X<10-this.el.offsetWidth){
            X=10-this.el.offsetWidth
        }else if(X>document.documentElement.clientWidth-10){
            X =document.documentElement.clientWidth-10
        }
        if(Y<10-this.el.clientHeight){
            Y=10-this.el.clientHeight
        }else if(Y>document.documentElement.clientHeight-10){
            Y =document.documentElement.clientHeight-10
        }
        this.el.style.left = X+'px'
        this.el.style.top = Y+'px'
    }
    //釋放
    onMouseUp(e){
        document.onmousemove = null
        document.onmouseup =null
        this.setEleStyle({'cursor': 'pointer'})
        this.el.setCapture&&this.el.setCapture() //釋放全局捕獲

    } 
}

 

3. 將封裝好的拖拽整合在指令上

//src/directive/drag.js
export const  drag = {
    mounted(el, binding) { 
        new Drap(el,binding.value||{})
    }
}

 

4.  導入注冊在當前app 實例

//src/main.js
import {drag} from  "./directive/drag"
app.directive('drag', drag)
app.mount('#app')

 

5. 在組件中用

<template>
    <div>
        <div class="box" v-drag="{'zIndex':100}">1</div>
         <div class="box" v-drag>2</div>
    </div>
</template>
<style scoped>
.box{
    width: 100px;
    height: 100px;
    background: red;
}
</style>