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

有问题欢迎指出

相关推荐
gyx_这个杀手不太冷静6 小时前
大人工智能时代下前端界面全新开发模式的思考(三)
前端·架构·ai编程
小李子呢02117 小时前
前端八股性能优化(1)---防抖和节流
开发语言·前端·javascript
IT_陈寒7 小时前
Python多进程共享变量那个坑,我差点没爬出来
前端·人工智能·后端
ayqy贾杰7 小时前
Claude Code 重构,并行化或终结 IDE 时代
前端·javascript·面试
tanis_38 小时前
MinerU JS/TS SDK 深度指南:JavaScript/TypeScript 开发者的 PDF/文档解析利器
javascript
SuperChe8 小时前
用AI Native的方式优化前端性能
前端·算法
陈广亮8 小时前
工具指南24-在线CSS Box Shadow生成器
前端
颜酱8 小时前
智能体与工作流:从「想做一个应用」到「能跑通一条链」
前端·javascript·人工智能
前端 贾公子8 小时前
Tailwind CSS OKLCH 颜色与所有浏览器兼容
前端
Lans8 小时前
别再手动管理 NavBackStackEntry 了!ComposeResult:更优雅的 Jetpack Compose 页面通信方案
前端