vue自定义指令

vue中不止有v-if、v-else、v-model这样的指令，可自定义指令。项目中有一个搜索页面，进去之后获取焦点，使用input的autofocus属性，很奇怪的是第一次焦点在，但是第二次焦点就获取不上了。这个问题也一直没有找到原因，还在找原因，项目急就用了自定义指令的方法。
自己定义一下focus。有两种方式注册指令，一种是全局的一种是在组件内的（在组件内注册就类似于watch、filter的用法）。

注册全局组件

1
2
3
4
5
6
7
8
9
import Vue from 'vue'

Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

注册局部（组件内）

1
2
3
4
5
6
7
8
directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

在绑定函数的地方，传入一个参数el，el便是添加指令的地方获取的dom元素，比如说将该指令添加在input输入框中，那么el便是获取该DOM元素，所以若是想要改变元素的样式或者内容等等，可以写成el.style.color或el.innerHtml，等等一系列的DOM操作。

然后在模板中使用该指令：

1
<input type="text" v-model="inputValue" placeholder="搜索" v-focus>

这样就无论如何input输入框一直都是在focus的状态了。