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

有问题欢迎指出

相关推荐
小疙瘩9 分钟前
element-ui 中 el-upload 多文件一次性上传的实现
javascript·vue.js·ui
Aliex_git18 分钟前
浏览器 API 兼容性解决方案
前端·笔记·学习
独泪了无痕19 分钟前
useStorage:本地数据持久化利器
前端·vue.js
程序员林北北32 分钟前
【前端进阶之旅】JavaScript 一些常用的简写技巧
开发语言·前端·javascript
全栈前端老曹32 分钟前
【Redis】Redis 持久化机制 RDB 与 AOF
前端·javascript·数据库·redis·缓存·node.js·全栈
NEXT0636 分钟前
受控与非受控组件
前端·javascript·react.js
NEXT061 小时前
防抖(Debounce)与节流(Throttle)解析
前端·javascript·面试
mqiqe1 小时前
pnpm 和npm 有什么区别?
前端·npm·node.js
呆子小木心2 小时前
Vue2或Vue3项目引用百度地图
javascript·vue.js·typescript·前端框架·html5
Swift社区3 小时前
React 项目生产环境构建与静态资源优化
前端·react.js·前端框架