Vue.js: 自定义指令

// directives/permission.js
export const permission = {
  mounted(el, binding) {
    const { value } = binding  // 'user.create'
    const userPermissions = getCurrentUser().permissions || []
    
    if (!userPermissions.includes(value)) {
      el.parentNode?.removeChild(el)  // 没权限就移除
    }
  }
}

// main.js
import { permission } from './directives/permission'
app.directive('permission', permission)

// 2. 简写（mounted + updated）
app.directive('color', (el, binding) => {
  el.style.color = binding.value
})

app.directive('demo', {
  // 1. created（指令创建）
  created(el, binding) {
    console.log('1. 指令创建')
  },
  
  // 2. beforeMount（元素挂载前）
  beforeMount(el) {
    console.log('2. 挂载前')
  },
  
  // 3. mounted（元素已挂载）⭐ 最常用
  mounted(el, binding) {
    console.log('3. 已挂载')
  },
  
  // 4. beforeUpdate（依赖更新前）
  beforeUpdate(el, binding) {
    console.log('4. 更新前')
  },
  
  // 5. updated（依赖更新后）
  updated(el, binding) {
    console.log('5. 已更新')
  },
  
  // 6. beforeUnmount（卸载前）
  beforeUnmount(el) {
    console.log('6. 卸载前')
  },
  
  // 7. unmounted（卸载后）⭐ 清理用
  unmounted(el) {
    console.log('7. 已卸载')
  }
})

// el, binding, vnode, prevVnode 4 个参数
mounted(el, binding, vnode, prevVnode) {
  // el: 指令绑定的元素
  el.style.color = 'red'
  
  // binding: 指令信息对象
  binding.value    // 指令值，如 v-foo="bar" → bar
  binding.arg      // 参数，如 v-foo:arg → 'arg'
  binding.modifiers  // 修饰符，如 v-foo.bar → { bar: true }
  binding.instance  // 使用指令的组件实例
  binding.dir       // 指令定义对象
  
  // vnode: Vue 虚拟节点（一般不用）
  // prevVnode: 上一个虚拟节点
}

顶部三个色块按钮「#ffe08a / #a5d8ff / #b2f2bb」，下方两行文字初始都是淡黄色底，第二行加粗。
点「#a5d8ff」→ 两行背景同时变成淡蓝色，第一行保持常规字重、第二行依然加粗——说明 .bold 修饰符只影响挂了它的那个元素。
再点「#b2f2bb」→ 两行一起变成淡绿色。

const { createApp } = Vue
const app = createApp({})

// 1. v-show（控制 display）
app.directive('show', {
  mounted(el, binding) { el.style.display = binding.value ? '' : 'none' },
  updated(el, binding) { el.style.display = binding.value ? '' : 'none' }
})

// 2. v-text（设置 textContent）
app.directive('text', {
  mounted(el, binding) { el.textContent = binding.value },
  updated(el, binding) { el.textContent = binding.value }
})

// 3. v-html（设置 innerHTML，XSS 风险）
app.directive('html', {
  mounted(el, binding) { el.innerHTML = binding.value },
  updated(el, binding) { el.innerHTML = binding.value }
})

这段代码只定义并注册指令，没有挂载任何页面，所以页面上看不到变化。
实际使用时：v-show="false" 的元素 display 变成 none；v-text="'hi'" 写入纯文本 hi；v-html="'<b>x</b>'" 渲染出加粗的 x。

// directives/focus.js
export const focus = {
  mounted(el, binding) {
    if (binding.value !== false) {
      el.focus()
    }
  }
}

// directives/permission.js
import { getCurrentUser } from '@/utils/auth'

export const permission = {
  mounted(el, binding) {
    const { value, modifiers } = binding
    const user = getCurrentUser()
    
    // value: 字符串 'user.create' 或 数组 ['user.create', 'user.delete']
    // modifiers.disable: 禁用而非移除
    const required = Array.isArray(value) ? value : [value]
    const hasPermission = required.every(p => 
      user.permissions?.includes(p)
    )
    
    if (!hasPermission) {
      if (modifiers.disable) {
        el.disabled = true
        el.title = 'No permission'
      } else {
        el.parentNode?.removeChild(el)
      }
    }
  }
}

// directives/debounce.js
export const debounce = {
  mounted(el, binding) {
    const { value, arg = 300 } = binding
    
    if (typeof value !== 'function') {
      console.warn('v-debounce: value must be a function')
      return
    }
    
    let timer = null
    el.__debounceTimer__ = timer
    
    el.addEventListener('click', () => {
      clearTimeout(timer)
      timer = setTimeout(() => value(), arg)
      el.__debounceTimer__ = timer
    })
  },
  
  unmounted(el) {
    if (el.__debounceTimer__) {
      clearTimeout(el.__debounceTimer__)
    }
  }
}

// directives/copy.js
export const copy = {
  mounted(el, binding) {
    const handler = async () => {
      try {
        await navigator.clipboard.writeText(binding.value)
        const original = el.textContent
        el.textContent = 'Copied!'
        setTimeout(() => { el.textContent = original }, 1500)
      } catch (err) {
        console.error('Copy failed:', err)
      }
    }
    el.addEventListener('click', handler)
    el.__copyHandler__ = handler
  },
  
  unmounted(el) {
    if (el.__copyHandler__) {
      el.removeEventListener('click', el.__copyHandler__)
    }
  }
}

// directives/lazyLoad.js
export const lazyLoad = {
  mounted(el, binding) {
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        el.src = binding.value
        observer.unobserve(el)
      }
    })
    observer.observe(el)
    el.__observer__ = observer
  },
  
  unmounted(el) {
    el.__observer__?.disconnect()
  }
}

<!-- 1. v-directive="value"（值） -->
<input v-foo="username">

<!-- 2. v-directive:arg（参数，固定字符串） -->
<input v-foo:delay="500">

<!-- 3. v-directive.modifier（修饰符，布尔对象） -->
<input v-foo.bar>

<!-- 4. 组合 -->
<input v-foo:delay.bar="500">

app.directive('demo', (el, binding) => {
  // v-demo="123"
  binding.value  // 123
  
  // v-demo:abc
  binding.arg  // 'abc'
  
  // v-demo.foo
  binding.modifiers  // { foo: true }
  
  // v-demo:abc.foo="123"
  binding.value    // 123
  binding.arg       // 'abc'
  binding.modifiers // { foo: true }
})

<!-- 场景 1：v-permission:disable -->
<button v-permission:disable="'user.create'">
  <!-- arg='disable', value='user.create' -->
</button>

<!-- 场景 2：v-debounce:500 -->
<button v-debounce:500="handler">
  <!-- arg='500'（500ms 防抖） -->
</button>

<!-- 场景 3：v-once.lazy -->
<img v-once.lazy="imageUrl">
<!-- modifiers.lazy=true, value=imageUrl -->
</template>

三个区块自上而下：
v-focus — 两个输入框，打开页面时第一个（占位符「打开页面自动聚焦」）已获得焦点，500ms 后焦点自动跳到第二个；
v-copy — 按钮「复制链接」，点击后文字变「Copied!」，1.5 秒后恢复，剪贴板里是 https://web-tutorial.com；
v-debounce:800 — 按钮「保存（防抖 800ms）」和「实际触发次数: 0」，连点多次只在停止点击 800ms 后计一次，次数变 1。