Vue3自定义指令完全指南(附详细代码)

// main.js
const app = createApp(App)

app.directive('focus', {
  mounted(el) {
    el.focus()
  }
})

export default {
  directives: {
    highlight: {
      mounted(el, binding) {
        el.style.backgroundColor = binding.value || 'yellow'
      }
    }
  }
}

// 使用
<input v-focus>

// 实现
app.directive('focus', {
  mounted(el) {
    el.focus()
  }
})

// 使用
<button v-permission="['admin']">删除</button>

// 实现
app.directive('permission', {
  mounted(el, binding) {
    const roles = ['user', 'editor', 'admin']
    if (!binding.value.includes(roles.current)) {
      el.parentNode.removeChild(el)
    }
  }
})

// 使用
<button v-debounce:click="submitForm">提交</button>

// 实现
app.directive('debounce', {
  mounted(el, binding) {
    let timer = null
    el.addEventListener(binding.arg, () => {
      clearTimeout(timer)
      timer = setTimeout(() => {
        binding.value()
      }, 500)
    })
  }
})

// 使用
<div v-pin:[direction]="200"></div>

// 实现
app.directive('pin', {
  mounted(el, binding) {
    el.style.position = 'fixed'
    const direction = binding.arg || 'top'
    el.style[direction] = binding.value + 'px'
  }
})

import { useScroll } from './scrollComposable'

app.directive('scroll', {
  mounted(el, binding) {
    const { start, stop } = useScroll(binding.value)
    el._scrollHandler = { start, stop }
    start()
  },
  unmounted(el) {
    el._scrollHandler.stop()
  }
})