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即可。