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 />

有问题欢迎指出

相关推荐
嘉琪0012 分钟前
Day1 完整学习包(var/let/const + 作用域)——2026 0310
前端·javascript·学习
Moment6 分钟前
2026 年 Next.js 站点的 SEO 优化指南
前端·javascript·面试
We་ct8 分钟前
LeetCode 46. 全排列:深度解析+代码拆解
前端·数据结构·算法·leetcode·typescript·深度优先·回溯
problc9 分钟前
前端预览pdf有哪些方案
前端·pdf
小小仙。11 分钟前
IT自学第三十二天
服务器·前端·javascript
@大迁世界15 分钟前
01.什么是 ReactJS?
前端·javascript·react.js·前端框架·ecmascript
l1t17 分钟前
利用DuckDB 1.5的json和struct功能分析llama web-ui导出的对话json文件
前端·ui·json
猫头虎-前端技术18 分钟前
这个项目需要Node 16,那个项目需要Node 18:如何解决多项目Node.js版本管理问题
前端·javascript·chrome·typescript·node.js·json·firefox
IT_陈寒26 分钟前
JavaScript性能翻倍的5个隐藏技巧,90%的开发者都不知道!
前端·人工智能·后端
鹏北海29 分钟前
微前端中的 UMD:必要性解析
前端