vue3 寫乙個簡單的拖拽指令

1. vue3 指令的最終api 

const mydirective =,

mounted() {},
beforeupdate() {},
updated() {},
beforeunmount() {}, //新
unmounted() {}
}

2. 基於物件導向寫的拖拽

1

class drap)
10init());
12this.el.onmousedown =(e)=>
1718}19
//樣式設定
20setelestyle(option)24}
2526
//按下ele
27onmousedown(e))
32this.x = e.clientx-this
.el.offsetleft;
33this.y= e.clienty-this
.el.offsettop;
34         document.onmousemove=(e)=>this
.onmousemove(e);
35         document.onmouseup = (e)=>this
.onmouseup(e)36}
37//
移動move
38onmousemove(e)else
if(x>document.documentelement.clientwidth-10)
46if(y<10-this
.el.clientheight)else
if(y>document.documentelement.clientheight-10)
51this.el.style.left = x+'px'
52this.el.style.top = y+'px'53}
54//
釋放55
onmouseup(e))
59this.el.setcapture&&this.el.setcapture() //
釋放全域性捕獲
6061
} 62 }

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

//

src/directive/drag.js
export const  drag =)
}}

//

src/main.js
5. 在元件中用12

自己寫乙個jqery的拖拽外掛程式

說實話，jquery比原生的js好用多了，本來想用原生寫的，也寫出來的，僅僅是，感覺不像外掛程式，所以用jquery實現了一版。實現的功能 能夠指定拖拽的邊界，在拖拽過程中，能夠觸發幾個自己定義事件 先說明一下我寫的外掛程式的原則 1.常量分離出來，放在 zui.外掛程式中 2.外掛程式的主體執行函...

自己寫的乙個Vue

下面這裡是我自己寫的乙個小型的vue，原理就是proxy proxy天生沒有prototype，因此要加上，不然extends會報錯 proxy.prototype proxy.prototype object.prototype class myvue extends proxy super da...

如何寫乙個Vue自定義指令

vue除了核心功能缺省內置的指令 vue 也允許註冊自定義指令。自定義指令是用來操作dom的。儘管vue推崇資料驅動檢視的理念，但並非所有情況都適合資料驅動。自定義指令就是一種有效的補充和擴充套件，不僅可用於定義任何的dom操作，並且是可復用的。寫乙個自定義指令的兩種方式 全域性指令 通過 vue....