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

有问题欢迎指出

相关推荐
广州华水科技10 分钟前
单北斗GNSS变形监测系统在水利工程安全保障中的应用与优势分析
前端
yqcoder20 分钟前
CSS 外边距重叠(Margin Collapsing):现象、原理与完美解决方案
前端·css
山楂树の1 小时前
图像标注大坑:img图片 + Canvas 叠加标注,同步放大后标注位置偏移、对不齐?详解修复方案及亚像素处理原理
前端·css·学习·canva可画
本山德彪1 小时前
我做了一个拼豆图纸生成器,把照片秒变图纸
前端
DTrader2 小时前
用TS无法实盘量化? - 实盘均线策略
前端·api
进击的夸父2 小时前
vfojs:Vue 超集架构,外壳React灵魂Vue
前端
编程老船长2 小时前
解决不同项目需要不同 Node.js 版本的问题
前端·vue.js
Wect2 小时前
LeetCode 5. 最长回文子串:DP + 中心扩展
前端·算法·typescript
漫游的渔夫2 小时前
前端开发者做 Agent:别写成一次请求,用 5 步受控循环防止 AI 乱跑
前端·人工智能·typescript
薛定猫AI3 小时前
【深度解析】Gemma Chat 本地 AI 编程 Agent:Electron + MLX + 开源模型的离线 Vibe Coding 实战
javascript·人工智能·electron