一:注册全局指令
在main.ts中加入如下配置:
// =======================================================
// 注册一个全局自定义指令 `v-focus`
app.directive('console', {
// 当被绑定的元素插入到 DOM 中时……
mounted(el) {
// Focus the element
// el.focus()
console.log('自定义全局指令v-console 注册成功');
}
})
二:注册局部指令
在某个页面的js中:
name: "index",
components: {},
/**
* @name: 自定义指令(局部注册)
* @author: camellia
* @email: [email protected]
* @date: 2021-02-25
*/
directives: {
// v-part
part: {
// 指令的定义
mounted(el: any) {
// el.focus()
console.log(el);
console.log('自定义局部指令注册成功!');
}
}
},
三:v-preventReClick,防止多次点击,重复请求
name: "index",
components: { },
/**
* @name: 自定义指令(局部注册)
* @author: camellia
* @email: [email protected]
* @date: 2021-02-25
*/
directives: {
// v-part
preventReClick: {
// 指令的定义
mounted(el: any, binding:any) {
// el.focus()
console.log(el);
console.log(binding);
// console.log('自定义局部指令注册成功!');
el.addEventListener('click', () => {
if (!el.disabled) {
console.log(123);
el.disabled = true;
setTimeout(() => {
el.disabled = false;
}, binding.value || 300);
}
});
}
}
},
四:调用方式
<button @click="handle" v-preventReClick>提交</button>