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

有问题欢迎指出

相关推荐
小金鱼Y20 小时前
别再乱拷贝了!JS 浅拷贝 vs 深拷贝全解析
前端·javascript
kyriewen21 小时前
Sass 进阶:当 CSS 学会了编程,变量函数循环全都安排上
前端·css·scss
海带先森21 小时前
python 虚拟环境的创建
前端
lovemiss21 小时前
解码本质:claude code是怎么运行的
前端
yuxi202021 小时前
Cursor 的 7 个隐藏功能,90% 的人不知道
前端
Moment21 小时前
MiniMax 发布 M2.7,Agent 开始走向自我进化
前端·后端·面试
发现一只大呆瓜21 小时前
Vue-Vue Router核心原理+实战用法全解析
前端·vue.js·面试
m0_6948455721 小时前
Oh My Zsh 使用指南:Zsh 终端配置与插件管理教程
服务器·前端·小程序·开源·github
英俊潇洒美少年21 小时前
React19 useActionState的注意事项
前端·javascript·react.js
huaqianzkh21 小时前
两个 ASP.NET Core Web API 模板核心区别
前端·后端·asp.net