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

有问题欢迎指出

相关推荐
前端小怪兽zmy8 分钟前
Vue3实现纯前端语音输入成文字显示
前端·javascript·elementui
ohyeah12 分钟前
原子化 CSS 与 Fragment:现代前端开发的高效实践
前端
鱼鱼块16 分钟前
告别重复传参!用柯里化提升代码优雅度
前端·javascript·面试
chilavert31818 分钟前
技术演进中的开发沉思-274 AJax :Button
前端·javascript·ajax·交互
Robet18 分钟前
static 和 lib/assets资源区别
前端·svelte
名字被你们想完了20 分钟前
Flutter 实现一个容器内部元素可平移、缩放和旋转等功能(九)
前端·flutter
千寻girling22 分钟前
面试官: “ 说一下你对 Cookie 的理解 ? ”
前端·后端
RedHeartWWW25 分钟前
nextjs中,关于Layout组件和Page组件的认知
前端·react.js
大明二代26 分钟前
基于 Microsoft Graph API 与 React Email 构建现代化邮件发送系统
前端·react.js·microsoft
sujiu28 分钟前
eslint匹配规则速通
前端