自定义指令简介及用法

自定义指令

• 用法

  • 全局注册：在main.ts文件中引入

    Vue.directive('focus', {
    	inserted: function (el) {
    		if (focusTimer) {
    			clearTimeout(focusTimer);
    		}
    		focusTimer = setTimeout(() => {
    			// 100毫秒延迟解决第二次点击弹框，输入框不自动获取焦点的bug
    			el.focus();
    		}, 100);
    	},
    });
    

  • 局部注册：在使用该指令的组件中申明
    

  • 在模板中使用

    <a-input v-focus></a-input>
    

• 应用场景

  1. 输入框自动聚焦：v-focus

     let focusTimer: number | null = null;
     
     Vue.directive('focus', {
     	inserted: function (el) {
     		if (focusTimer) {
     			clearTimeout(focusTimer);
     		}
     		focusTimer = setTimeout(() => {
     			// 100毫秒延迟解决第二次点击弹框，输入框不自动获取焦点的bug
     			el.focus();
     		}, 100);
     	},
     });
     

  2. 表单的重复提交：v-throttle

     // 传参 <button v-throttle="[()=>{showAddModal()}, 5000]" />
     // 不传参 <button v-throttle="showAddModal" />
     Vue.directive('throttle', {
     	inserted: function (el, binding) {
     		let cbFun: number | null = null;
     		el.addEventListener('click', () => {
     			let func;
     			let throttleTime = 2000;
     			if (binding.value instanceof Array) {
     				[func, throttleTime] = binding.value;
     			} else {
     				func = binding.value;
     			}
     			// 如果是第一次执行或者到了节流时间
     			if (!cbFun) {
     				func();
     				cbFun = setTimeout(() => {
     					cbFun = null;
     				}, throttleTime);
     			}
     		});
     	},
     });