VUE——自定义指令

v-focus:自动获取焦点

DOM插入便获取焦点:

Vue.directive( 'focus',{
inserted: function (el) {
el.focus()
}
})

根据指令的值决定自否获取焦点:

Vue.directive( 'focus',{
inserted: function(el,binding){
if(binding.value){
el.focus()
}
}
})

v-drag:拖拽

注:被拖拽的元素必须有定位样式

Vue.directive( 'drag', function(el,binding){
let $el=el;
$el.onmousedown= function(ev){
ev=window.event?window.event:ev;
let disX=ev.clientX-$el.offsetLeft;
let disY=ev.clientY-$el.offsetTop;
document.onmousemove= function(ev){
ev=window.event?window.event:ev;
let L=ev.clientX-disX;
let T=ev.clientY-disY;
$el.style.left=L+ 'px';
$el.style.top=T+ 'px';
}
document.onmouseup= function(){
document.onmousemove= null;
document.onmouseup= null;
}
}
})

拓展:自定义键盘信息

键盘一般配合时间使用,

如:@keydown.enter='show'——按下enter键时触发

@keydown.key='show'——按下key键时触发(key:键盘上可见的值,eg:a、b.......)

自定义:

    Vue.directive('on').keyCodes.ctrl=17;//给keycode=17的键起了名字叫‘ctrl’

    使用的时候@keypress.ctrl即可。


猜你喜欢

转载自blog.csdn.net/qq_36111804/article/details/80536104