VUE directive自定義指令 拖拽案例

語法如下：

vue.directive( id, [definition] )

id [definition]

在main.js中書寫

vue.

directive
("harry",,
inserted:
function()
, update:
function
(el,binding)
, componentupdated:
function()
, unbind:
function()
});

="qiqi" v-harry=

"color"
>
}<
/div>

return

;

//拖動

vue.
directive
("drag"
,else
//滑鼠按下，計算當前元素距離可視區的距離
let disx = touch.clientx - odiv.offsetleft;
let disy = touch.clienty - odiv.offsettop;
let maxw = document.body.clientwidth - odiv.offsetwidth;
let maxh = document.body.clientheight - odiv.offsetheight;
odiv.style.zindex =
1002
; document.
ontouchmove
=function
(e)else
let l = touch.clientx - disx;
let t = touch.clienty - disy;
//移動當前元素
if(l <0)
else
if(l > maxw)
if(t <0)
else
if(t >= maxh)
odiv.style.left = l +
"px"
; odiv.style.top = t +
"px";}
; document.
ontouchend
=function
(e);};
}});

v-drag

>
<
/div>

在你的專案路徑下建立乙個directive資料夾

//拖拽

const drag =
else
//滑鼠按下，計算當前元素距離可視區的距離
let disx = touch.clientx - odiv.offsetleft;
let disy = touch.clienty - odiv.offsettop;
let maxw = document.body.clientwidth - odiv.offsetwidth;
let maxh = document.body.clientheight - odiv.offsetheight;
odiv.style.zindex =
1002
; document.
ontouchmove
=function
(e)else
let l = touch.clientx - disx;
let t = touch.clienty - disy;
//移動當前元素
if(l <0)
else
if(l > maxw)
if(t <0)
else
if(t >= maxh)
odiv.style.left = l +
"px"
; odiv.style.top = t +
"px";}
; document.
ontouchend
=function
(e);};
}}export

import

*as directive from
"./directive/index"
object.
keys
(directive)
.foreach
(keys=>
)

"position:absolute"

>
拖拽<
/div>

VUE directive 自定義指令

add value 是設定 自定義指令中傳遞的三個引數 el 指令所繫結的元素，可以用來直接操作dom。binding 乙個物件，包含指令的很多資訊。vnode vue編譯生成的虛擬節點。自定義指令有五個生命週期 也叫鉤子函式 分別是 bind,inserted,update,componentup...

自定義 如何自定義協議

何為自定義協議，其實是相對標準協議來說的，這裡主要針對的是應用層協議 常見的標準的應用層協議如http ftp smtp等，如果我們在網路通訊的過程中不去使用這些標準協議，那就需要自定義協議，比如我們常用的rpc框架 dubbo，thrift 分布式快取 redis，memcached 等都是自定義...

自定義控制項 自定義鐘錶

private context mcontext 畫筆 private paint mpaint 控制項的寬 private int mwidth x方向的圓心座標 private int center 鐘錶的半徑 private int mradio 圓環的寬 private int stroke...