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

有问题欢迎指出

相关推荐
江上清风山间明月1 分钟前
Vite现代化的前端构建工具详解
前端·webpack·nodejs·vite
PBitW3 分钟前
apijson 让前端自己定义接口 —— 但不推荐
前端·apijson
存在X3 分钟前
前端自动化编译Jenkins
前端·github
军军君018 分钟前
数字孪生监控大屏实战模板:云数据中心展示平台
前端·javascript·vue.js·typescript·前端框架·es6·echarts
吴声子夜歌13 分钟前
Vue3——使用axios实现Ajax请求
前端·javascript·ajax·axios
qq43569470118 分钟前
JavaWeb05
前端·html
@PHARAOH18 分钟前
WHAT - W3C WCAG 2.1 AA 无障碍标准
前端
用户游民38 分钟前
Android 项目aab包上传谷歌平台需支持16KB页面
前端
SevgiliD42 分钟前
后台下载:获取响应头文件名
前端
Hejjon1 小时前
Vue3 页面刷新时在 onMounted 里获取到的path 一直是 / 问题
前端