Vue自定义指令

一、什么是自定义指令

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令，自定义一些指令对底层DOM进行操作。

二、自定义指令的使用

1、全局注册

a、新建一个js文件专门放置自定义指令

 b、在main.js中全局引入

import './utils/permission.js'

c、在需要使用的地方直接使用：v-permission

<el-button
            type="primary"
            size="small"
            icon="el-icon-plus"
            @click="openAddDialog"
            v-permission="{action: 'add', effect: 'disabled'}"
>添加</el-button>

d、也可在main.js中直接注册

Vue.directive("permission", {
    inserted: function (el, binding) {
        const action = binding.value.action;
        const current_right = router.currentRoute.meta.rights;
        if (current_right) {
            if (current_right.indexOf(action) === -1) {
                const type = binding.value.effect;
                if (type === "disabled") {
                    el.disabled = true;
                    el.classList.add("is-disabled");
                } else {
                    el.parentNode.removeChild(el);
                }
            }
        }
    }
})

2、局部注册

<script>
export default {
    directives: {
      focus: {
        // 指令的定义
        inserted: function (el) {
          el.focus()
        }
      }
    }
};
</script>

三、注意

和js有关的代码最好写在inserted方法中。