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

有问题欢迎指出

相关推荐
GDAL1 分钟前
better-sqlite3之exec方法
javascript·sqlite
匹马夕阳42 分钟前
基于Canvas和和原生JS实现俄罗斯方块小游戏
javascript·canva可画
m0_6161884943 分钟前
Vue3 中 Computed 用法
前端·javascript·vue.js
六个点1 小时前
图片懒加载与预加载的实现
前端·javascript·面试
weixin_460783871 小时前
Flutter解决TabBar顶部页面切换导致页面重载问题
android·javascript·flutter
Patrick_Wilson1 小时前
🔥【全网首篇】30分钟带你从0到1搭建基于Lynx的跨端开发环境
前端·react.js·前端框架
逍遥客.1 小时前
uniapp对接打印机和电子秤
javascript·vue.js·uni-app
小沙盒1 小时前
godot在_process()函数实现非阻塞延时触发逻辑
javascript·游戏引擎·godot
Moment1 小时前
前端 社招 面筋分享:前端两年都问些啥 ❓️❓️❓️
前端·javascript·面试
Moment1 小时前
一坤时学习 TS 中的装饰器,让你写 NestJS 不再手软 😏😏😏
前端·javascript·面试