Vue 自定义全局指令

Vue 自定义全局指令

除了常用的指令例如v-show、v-on等指令外，我们也可以通过自定义指令来实现特定的功能，例如聚焦文本框。

1、指令注册

例如现在我需要检查登录的用户有没有某个功能的权限，如果没有，则隐藏对应的功能按钮。

通过binding.value获取参数的值，然后检查接口返回值，false 则移除元素。

// 注册一个全局自定义指令 `v-permission`
Vue.directive('permission', {
    // 当被绑定的元素插入到 DOM 中时……
    inserted: function (el, binding) {
        // 查询是否有请求权限，如果没有移除该元素
        let verifyUrl = binding.value
        $.ajax({
            type: "post",
            data: {"url": verifyUrl},
            dataType: "JSON",
            async: false,
            url: "/lin/user/verifyUserPermission",
            success: function (data) {
                if (!data) {
                    //移除该元素
                    el.parentNode.removeChild(el)
                }
            }
        });
    }
})

2、指令调用

注册指令后，我们可以调用上文的v-permission指令。

<!--引入指令 -->
<script src="/resources/permission.js"></script>
<!--传入'/lin/user/update' -->
<el-button size="mini" v-permission="'/lin/user/update'">编辑</el-button>

当指令接口返回值为 false 时，移除该<el-button> 元素。

关于更详细的命令介绍参考官网：https://cn.vuejs.org/v2/guide/custom-directive.html