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

有问题欢迎指出

相关推荐
ANnianStriver7 分钟前
PetLumina 07 — 宠物管理升级与 JavaScript 大数精度修复
开发语言·javascript·ai编程·宠物
初一初十26 分钟前
vue3茶叶商城网站vue网页vuejs前端
前端·javascript·vue.js·vscode·前端框架
kyriewen33 分钟前
前端性能优化:LCP 从 4s 到 0.9s 的 5 个核心手段(附配置代码)
前端·javascript·性能优化
xiaofeichaichai43 分钟前
Proxy与Reflect
前端·javascript
小蜜蜂dry1 小时前
nestjs实战-权限二:角色模块
前端·后端·nestjs
rm1091 小时前
【js逆向】webpack自吐算法记录
javascript
AskHarries1 小时前
权限模型:Shell、Browser、文件读写的安全边界
服务器·前端·网络
小蜜蜂dry1 小时前
nestjs实战-权限一: 菜单模块
前端·后端·nestjs
用户5812441541571 小时前
GemDesign MCP协议详解:从原型到代码的完整技术链路
前端
半个烧饼不加肉2 小时前
JS 底层探究-- 事件循环
开发语言·前端·javascript