Open zhaobinglong opened 3 years ago
// 自定义指令,实现按下enter后,光标自动跳转下一个输入框
Vue.directive('enterNextInput', {
inserted: function (el) {
el.addEventListener("keypress",function(e){
e = e || window.event;
let charcode = typeof e.charCode == 'number' ? e.charCode : e.keyCode;
console.log(charcode)
if(charcode == 13){
var dom = document.getElementsByTagName("input")
for (var i = 0; i < dom.length; i++) {
if (dom[i] == document.activeElement) {
if (i==dom.length) {
return
}
dom[i+1].focus()
return
}
}
}
});
}
});
V-Clipboard 仓库地址: https://github.com/euvl/v-clipboard 安装: npm install --save v-clipboard
这个简单指令的作者是Yev Vlasenko ,可以用在任何静态或动态元素上。当元素被点击时,指令的值会被复制到剪贴板上。用户需要复制代码片段的时候,这个非常有用。
// 自定义指令:防重复点击
// 调用方式:v-resetClick || v-resetClick="2000"
Vue.directive('resetClick', {
inserted(el, binding) {
el.addEventListener('click', () => {
if (!el.disabled) {
el.disabled = true
setTimeout(() => {
el.disabled = false
}, binding.value || 1000)
}
})
}
})
https://blog.csdn.net/weixin_41628411/article/details/105728550
全局导入指令
指令文件夹中的指令编写
指令的本质
在指令中操作dom元素,数据驱动视图的补充手段
限制只能输入数字(数字和小数点)
限制只能输入数字(整数)
自定义loading指令