单独实现vue指令

实现自定义 Vue 指令

Vue 指令的核心是通过 directive 方法注册全局或局部指令，指令定义对象包含生命周期钩子函数。以下是一个完整的实现示例：

全局指令注册

Vue.directive('focus', {
  inserted: function(el) {
    el.focus();
  }
});

局部指令注册

new Vue({
  directives: {
    focus: {
      inserted: function(el) {
        el.focus();
      }
    }
  }
});

指令钩子函数

指令定义对象可包含以下钩子：

• bind：指令第一次绑定到元素时调用
• inserted：被绑定元素插入父节点时调用
• update：所在组件 VNode 更新时调用
• componentUpdated：所在组件及子组件 VNode 更新后调用
• unbind：指令与元素解绑时调用

Vue.directive('demo', {
  bind(el, binding, vnode) {
    // 初始化设置
  },
  update(el, binding, vnode, oldVnode) {
    // 根据变化更新
  }
});

指令参数解析

钩子函数接收以下参数：

• el：指令绑定的 DOM 元素
• binding：包含以下属性的对象
  • value：指令的绑定值
  • oldValue：指令绑定的前一个值
  • arg：指令的参数
  • modifiers：包含修饰符的对象
• vnode：Vue 编译生成的虚拟节点

实际应用示例

颜色切换指令

Vue.directive('color', {
  bind(el, binding) {
    el.style.color = binding.value;
  },
  update(el, binding) {
    el.style.color = binding.value;
  }
});

使用方式：

<p v-color="'red'">这段文字会变红</p>

拖拽指令实现

Vue.directive('drag', {
  bind(el) {
    let startX, startY, initialX, initialY;

    el.addEventListener('mousedown', startDrag);

    function startDrag(e) {
      e.preventDefault();
      startX = e.clientX;
      startY = e.clientY;
      initialX = el.offsetLeft;
      initialY = el.offsetTop;

      document.addEventListener('mousemove', drag);
      document.addEventListener('mouseup', stopDrag);
    }

    function drag(e) {
      el.style.left = `${initialX + e.clientX - startX}px`;
      el.style.top = `${initialY + e.clientY - startY}px`;
    }

    function stopDrag() {
      document.removeEventListener('mousemove', drag);
      document.removeEventListener('mouseup', stopDrag);
    }
  }
});

动态参数指令

通过 binding.arg 获取动态参数：

Vue.directive('pin', {
  bind(el, binding) {
    el.style.position = 'fixed';
    const side = binding.arg || 'top';
    el.style[side] = binding.value + 'px';
  }
});

使用方式：

<p v-pin:left="100">固定在左侧100px处</p>

指令修饰符处理

通过 binding.modifiers 访问修饰符：

Vue.directive('font', {
  bind(el, binding) {
    if (binding.modifiers.bold) {
      el.style.fontWeight = 'bold';
    }
    if (binding.modifiers.italic) {
      el.style.fontStyle = 'italic';
    }
  }
});

使用方式：

<p v-font.bold.italic>加粗斜体文本</p>