自定义指令相关知识忘了好多，赶紧补充一下。

格式

v-指令名：参数="指令值"

比如：v-on:click.stop

上述指令的各类参数均可利用下文的binding获取

binding.name可获取指令名

binding.value可获取指令值

binding.arg可获取参数

binding.modifiers可获取修饰符对象(因为存在多个，所以是对象)

自己怎么写指令呢？

咱们写自定义指令本质是在写一个对象，这个对象内部有多个钩子函数， 具体参考官网文档

钩子函数简单总结

bind:首次绑定时候触发，元素还没插入到父元素中

inserted:元素插到父元素后触发

updated:指令值改变时触发

本次，咱们需要使用的是inserted(el,binding)钩子函数，利用这个钩子函数，我们可以获取到该元素的父元素，从而可以使用dom操作删除自身。

案例:按钮的权限控制&&目标元素的拖动

directives: {
          hasrole: {
            inserted(el, binding, vnode) {
            //vnode.context.roles可以获取到data中的roles数组
              if (!vnode.context.roles.includes(binding.value)) {
              //binding.value获取指令值
                el.parentNode.removeChild(el);
              }
            },
          },
          draggable: {
            bind(el) {
              let offsetX = 0;
              let offsetY = 0;
              let isDragging = false;

              const onMouseDown = (event) => {
                isDragging = true;
                offsetX = event.clientX - el.getBoundingClientRect().left;
                offsetY = event.clientY - el.getBoundingClientRect().top;
                document.addEventListener("mousemove", onMouseMove);
                document.addEventListener("mouseup", onMouseUp);
              };

              const onMouseMove = (event) => {
                if (isDragging) {
                  el.style.left = `${event.clientX - offsetX}px`;
                  el.style.top = `${event.clientY - offsetY}px`;
                }
              };

              const onMouseUp = () => {
                if (isDragging) {
                  isDragging = false;
                  document.removeEventListener("mousemove", onMouseMove);
                  document.removeEventListener("mouseup", onMouseUp);
                }
              };

              el.addEventListener("mousedown", onMouseDown);

              el.style.position = "absolute";
              el.style.cursor = "grab";
            },
            unbind(el) {
              el.removeEventListener("mousedown", onMouseDown);
            },
          },
        },

一般项目中，推荐在directives目录下新建并导出（export default）对象，然后在vue的directives里面注册即可。

//使用
 <button v-hasrole="'admin'" v-draggable>删除</button>
//注意，指令值是js表达式，所以你写字符串是需要用‘’，不然会被认为是个变量