超越 ref：利用模板引用直接操作 DOM 原生属性与自定义指令的深层协作

揭示 Vue 3 中 template ref 的深层用法：在自定义指令内接收 ref 对象、直接读写 DOM 元素原型属性、与动画 API 协同。 · 难度：入门 · +10XP

超越 ref：利用模板引用直接操作 DOM 原生属性与自定义指令的深层协作

许多开发者只停留在 ref.value 获取元素，但 Vue 3 允许在自定义指令的 mounted 钩子中注入 ref 对象，从而将 DOM 操作封装为可复用的逻辑。本教程展示如何通过指令修改元素的内联样式、属性乃至调用原生方法，实现一个无需额外库的拖拽功能。

import { ref, directive } from 'vue'
export const vDraggable = {
  mounted(el, binding, vnode) {
    const refObj = binding.value
    let startX, startY, initialX, initialY
    el.addEventListener('mousedown', (e) => {
      startX = e.clientX
      startY = e.clientY
      initialX = el.offsetLeft
      initialY = el.offsetTop
      document.onmousemove = (ev) => {
        el.style.left = initialX + ev.clientX - startX + 'px'
        el.style.top = initialY + ev.clientY - startY + 'px'
        if (refObj) refObj.value = el.getBoundingClientRect()
      }
      document.onmouseup = () => { document.onmousemove = null }
    })
  }
}