vue如何自定义指令？

自定义获取元素焦点的指令，v-focus

一、局部注册的写法

需求：当页面加载时，该元素将获得焦点；

1. 第一种，通过input的自带autofocus属性实现（autofocus在移动版Safari上不工作）
2. 第二种 利用自定义指令实现
   

<template>
  <div class="test-directives">
    <input v-focus />
  </div>
</template>
<script>
export default {
    
    
// 组件接收一个 directives 的选项,实现自定义指令的局部注册 （局部注册指令）,
  directives: {
    
    
    focus: {
    
     // 指令名称
      inserted: function(el) {
    
     // el是绑定了该自定义指令的dom，就是上面那个input
        el.focus();// 调用该input元素的focus方法，实现聚焦
      }
    }
  }
};
</script>

二、全局注册的写法：

1. 可在src下新建一个directives文件夹，该文件夹下定义一个index.js，内容如下：

import Vue from "vue";
Vue.directive("focus", {
    
    
  inserted: function(el) {
    
    
    el.focus();
  }
});

2. 在main.js中引入刚刚的index.js文件：

import "@/directives/index.js";

3. 在组件中直接使用该指令即可

<template>
  <div class="test-directives">
    <input v-focus />
  </div>
</template>

该方法，可用于需要定义多个全局指令的时候。
参考：vue官网