vue2系列 — 自定义指令

最新推荐文章于 2024-05-28 16:45:45 发布

诚诚程程成

最新推荐文章于 2024-05-28 16:45:45 发布

阅读量250

点赞数

文章标签： vue.js javascript 前端

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

版权

https://v2.cn.vuejs.org/v2/guide/custom-directive.html

<div v-example:foo.bar="baz">

vue 自定义指令的钩子

bind：当 v-XXX 指令绑定到节点上时触发
inserted：被绑定元素插入父节点时调用
update：所在组件的 VNode 更新时调用

指令钩子函数会被传入以下参数：

el：指令所绑定的元素，可以用来直接操作 DOM
binding：一个对象，包含以下 property：
- name：指令名，不包括 v- 前缀。
- arg：传递给指令的参数 (如果有的话)。例如在 v-my-directive:foo 中，参数是 "foo"。
- value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
- instance：使用该指令的组件实例。
…

使用方法：

创建一个 js 文件

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, '');
    };
  }
}

vue 文件中，import 引入文件
并在 directives 中定义
- ```
directives: {
    limitInput
}
```
在输入框上使用： <el-input v-model="name" v-limit-input></el-input>

将一个自定义指令全局注册: 在main.js写

// 使 v-focus 在所有组件中都可用
app.directive('focus', {
  /* ... */
})

](https://v2.cn.vuejs.org/v2/guide/custom-directive.html)

<div v-example:foo.bar="baz">