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

有问题欢迎指出

相关推荐
开源盛世!!19 分钟前
3.19-3.21
linux·服务器·前端
必胜刻20 分钟前
AJAX 请求理解
前端·ajax·okhttp·前后端交互
小民AI实战笔记22 分钟前
NVM实战指南:高效管理你的Node.js环境
前端·node.js
www_stdio24 分钟前
前端异步核心:Promise 从入门到吃透
前端
朱建伟27 分钟前
大神尤雨溪再次出手,前端工具链整合--该文章是对vite plus官方README文档进行了翻译
前端·vite
vball29 分钟前
宏观数据从哪里来?——主流宏观经济数据库与API全景
前端
zhensherlock38 分钟前
Protocol Launcher 系列:Trae AI 编辑器的深度集成
javascript·人工智能·vscode·ai·typescript·编辑器·ai编程
吠品1 小时前
Vue项目Moment.js引入优化:全局挂载与按需引入的深度解析与最佳实践
前端·javascript·vue.js
不甜情歌1 小时前
JS 类型判断不用愁:4 种方法,覆盖所有场景
前端·javascript
ETA81 小时前
状态管理没那么复杂:手写实现 Zustand 核心逻辑
前端·react.js