el-input添加自定义指令只允许输入中文/英文/数字,兼容输入法事件

省流

script:

javascript 复制代码
directives: {
 regexp: {
   inserted: (el, binding, vnode) => {
     let composition = false
     const formatValue = function (e) {
       if (composition) return
       // vnode.componentInstance组件实例
       vnode.componentInstance.$emit('input', e.target.value.replace(/[^\u4e00-\u9fa5a-zA-Z0-9/]/g, ''))
     }
     el.oninput = formatValue
     // 请务必使用addEventListenner,不信邪你试试el.oncompositionstart
     el.addEventListener('compositionstart', () => { composition = true })
     el.addEventListener('compositionend', e => {
       composition = false
       formatValue(e)
     })
   }
 }
}

template:

html 复制代码
<el-input v-regexp />

有问题欢迎指出

相关推荐
青青家的小灰灰1 分钟前
Pinia 完全指南:重构你的 Vue 3 状态管理架构
前端·javascript·vue.js
yuki_uix1 分钟前
深入理解 JavaScript Event Loop:从概念到实践的完整探索
前端·javascript
程序员阿峰2 分钟前
WebSocket 原理解析
前端
Lee川5 分钟前
JavaScript 继承进化史:从原型链的迷雾到完美的寄生组合
前端·javascript·面试
米饭同学i5 分钟前
微信小程序实现故事线指引动画效果
前端
阿懂在掘金8 分钟前
为什么写 Vue 强烈建议用 Setup?除了复用,更是代码组织
前端·vue.js
sorryhc18 分钟前
我让 AI 帮我写了一个 Code Agent!
前端·openai·ai编程
工边页字19 分钟前
面试官:请详细介绍下AI中的token,越详细越好!
前端·人工智能·后端
anyup19 分钟前
月销 8000+,uView Pro 让 uni-app 跨端开发提速 10 倍
前端·uni-app·开源
码路飞42 分钟前
热榜全是 OpenClaw,但我用 50 行 Python 就造了个桌面 AI Agent 🤖
java·javascript