recruit

src/directive/customDirective.ts

@@ -1,5 +1,54 @@
 import type { App } from 'vue';
 
+/**
+ * 输入过滤指令
+ * @directive v-input-filter，如 `<el-input v-model="phone" v-input-filter="'number'" />`
+ * @param number - 纯数字
+ * @param alphanumeric - 数字+字母
+ * @param idcard - 数字+字母+括号（支持大陆、港澳台身份证）
+ * @param tel - 固话格式（数字+横杠+括号+空格）
+ */
+export function inputFilterDirective(app: App) {
+	app.directive('input-filter', {
+		mounted(el, binding) {
+			const input = el.querySelector('input') || el;
+			const filterType = binding.value || 'number';
+			
+			const filters: { [key: string]: RegExp } = {
+				number: /[^\d]/g,                 // 纯数字
+				alphanumeric: /[^0-9A-Za-z]/g,    // 数字+字母
+				idcard: /[^0-9A-Za-z()]/g,        // 数字+字母+括号（支持港澳台）
+				tel: /[^\d\-() ]/g,               // 固话：数字+横杠+括号+空格
+			};
+			
+			const handleInput = (e: Event) => {
+				const target = e.target as HTMLInputElement;
+				const regex = filters[filterType];
+				if (regex && target.value) {
+					const newValue = target.value.replace(regex, '');
+					if (newValue !== target.value) {
+						target.value = newValue;
+						// 触发 input 事件，确保 v-model 更新
+						target.dispatchEvent(new Event('input'));
+					}
+				}
+			};
+			
+			input.addEventListener('input', handleInput);
+			// 保存 handler，用于 unmounted 时清理
+			(el as any)._inputFilterHandler = handleInput;
+			(el as any)._inputFilterElement = input;
+		},
+		unmounted(el) {
+			const handler = (el as any)._inputFilterHandler;
+			const input = (el as any)._inputFilterElement;
+			if (handler && input) {
+				input.removeEventListener('input', handler);
+			}
+		},
+	});
+}
+
 /**
  * 按钮波浪指令
  * @directive 默认方式：v-waves，如 `<div v-waves></div>`

src/directive/index.ts

@@ -1,17 +1,20 @@
 import type { App } from 'vue';
 import { authDirective } from '/@/directive/authDirective';
-import { wavesDirective } from '/@/directive/customDirective';
+import { wavesDirective, inputFilterDirective } from '/@/directive/customDirective';
 
 /**
  * 导出指令方法：v-xxx
  * @methods authDirective 用户权限指令，用法：v-auth
  * @methods wavesDirective 按钮波浪指令，用法：v-waves
+ * @methods inputFilterDirective 输入过滤指令，用法：v-input-filter
  */
 export function directive(app: App) {
 	// 用户权限指令
 	authDirective(app);
 	// 按钮波浪指令
 	wavesDirective(app);
+	// 输入过滤指令
+	inputFilterDirective(app);
 	// focus
 	app.directive('focus', {
 		mounted(el) {