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