語法如下:
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>
元件頁面的data
return
;
在main.js中掛載 如下
//拖動
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>
上面這種肯定是會導致你的main.js過於雜亂,然後就把這種封裝吧
在你的專案路徑下建立乙個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
在你的main.js中書寫
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...