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.οnmοusedοwn=function(ev){
ev=window.event?window.event:ev;
let disX=ev.clientX-$el.offsetLeft;
let disY=ev.clientY-$el.offsetTop;
document.οnmοusemοve=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.οnmοuseup=function(){
document.οnmοusemοve=null;
document.οnmοuseup=null;
}
}
})
拓展:自定义键盘信息
Vue.config.keyCodes.ctrl=17
键盘一般配合事件使用,
如:@keydown.enter='show'——按下enter键时触发
@keydown.key='show'——按下key键时触发(key:键盘上可见的值,eg:a、b.......)
自定义:
Vue.directive('on').keyCodes.ctrl=17;//给keycode=17的键起了名字叫‘ctrl’
使用的时候@keypress.ctrl即可。