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

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>

你可能感兴趣的:(前端)