v-limit-input + 正则限制特殊字符

最新推荐文章于 2024-05-11 13:57:20 发布

诚诚程程成

最新推荐文章于 2024-05-11 13:57:20 发布

阅读量393

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/weixin_52268321/article/details/132588986

版权

src/directives/limitInput.js
设置自定义指令 limitInput 的逻辑

export default {
  // bind钩子 当 v-XXX 指令绑定到节点上时 触发
  bind (el) {
    el.oninput = () => {
      console.log('1', el)
      let pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]");
      el.children[0].value = el.children[0].value.replace(pattern, '');
    };
  }
}

App.vue
绑定 v-limit-input

<template>
  <div class="container">
    <el-input v-model="name" v-limit-input></el-input>
  </div>
</template>

<script>
import limitInput from './directives/limitInput.js'
export default {
  name: 'App',
  directives: {
    limitInput
  },
  components: {
    // ToDoList
  },
  data() {
    return {
      name: ''
    }
  }
}
</script>