1、基本使用

  • 参数：

    • {string} id
    • {Function | Object} [definition]

  • 用法：

    注册或获取全局指令。

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el，bind, vnode, oldVnode) {
    // 触发
  }
})

<input type='text' v-focus/>

关于钩子函数：

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

  • bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

  • inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

  • update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

  • componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

  • unbind：只调用一次，指令与元素解绑时调用。

关于钩子函数参数：

指令钩子函数会被传入以下参数：

  • el：指令所绑定的元素，可以用来直接操作 DOM。

  • binding

    ：一个对象，包含以下 property：

    • name：指令名，不包括 v- 前缀。
    • value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
    • oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
    • expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
    • arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
    • modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。

  • vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。

  • oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

2、高级使用

​ 定义可拖动组件

Vue.directive('drag', {
    inserted: function(el) {
        el.onmousedown = function(e) {
            let left = e.clientX - el.offsetLeft, // 鼠标点击位置距离div最左侧位置
                top = e.clientY - el.offsetTop, // 鼠标点击位置距离div最顶侧位置
                right = el.scrollWidth - left, // 鼠标点击位置距离div最右侧位置
                bottom = el.scrollHeight - top, // 鼠标点击位置距离div最低侧位置
                clientWidth = document.body.clientWidth, // 屏幕宽度
                clientHeight = document.body.clientHeight; // 屏幕高度
                console.log(clientHeight)
            document.onmousemove = function(e) {
                // 保证块在显示区域内移动
                if(e.clientX > left && e.clientX + right < clientWidth && e.clientY > top && e.clientY + bottom < clientHeight) {
                    el.style.left = e.clientX - left + 'px';
                    el.style.top = e.clientY - top + 'px';
                } 
            }
        }
        el.onmouseup = function() {
            document.onmousemove = null;
        }
    }
})

​ 高精度页面权限资源控制

​ vue页面：

<!-- 高精度资源权限控制 -->
<button v-permission="{ curPer:currentPermission, perArr: permissionArr, curPath: currentPath }">编辑</button>

<script>
  export default {
    computed: {
      // 这里获取路由，是因为在资源控制方法中添加了页面定位，方便调试
      currentPath(){
        return this.$route.path;
      }
    },
    data() {
      return {
        permissionArr: ['superadmin', 'editor'],
        currentPermission: 'editors'
      }
    },
  }
</script>

​ js方法

function isHanPermission(permissionArr, permissionItem) {
    if(permissionArr.length) {
        const index = permissionArr.indexOf(permissionItem);
        return index > -1;
    }
}

Vue.directive('permission', {
    inserted: function(el, bind) {
        const { curPer, perArr, curPath } = bind.value;
        if(curPer && perArr && curPath && perArr.length) !isHanPermission(perArr, curPer) && (el.parentNode && el.parentNode.removeChild(el));
        else throw new Error(`权限控制存在问题，路由位置:${curPath}`);
    }
})