浅析vue3项目中自定义指令的运用

<!-- main.js -->
import App from './App.vue'
const app = createApp(App)
const focusDirective = directive('focus', {
  mounted(el) {
    el.focus()
  }
})
app.directive('focus', focusDirective)
app.mount('#app')

<!-- App.vue -->
<template>
  <div>
    <input v-focus />
  </div>
</template>
<script setup>
// 略去导入模块等逻辑
</script>

<template>
  <div v-change-color></div>
</template>
<script setup>
  const changeColorDirective = {
    mounted(el) {
      el.addEventListener('mouseenter', () => {
        el.style.backgroundColor = 'blue'
      })
      el.addEventListener('mouseleave', () => {
        el.style.backgroundColor = ''
      })
    }
  }
  // 直接声明
  const vChangeColor = changeColorDirective
</script>
<style scoped>
  div {
    width: 100px;
    height: 100px;
    background-color: red;
    box-sizing: border-box;
  }
</style>

<template>
  <div>
    <button v-show-message>Click me!</button>
    <p>{{ message }}</p>
  </div>
</template>
<script setup>
import { ref } from 'vue'
const showMessageDirective = {
  mounted(el) {
    el.addEventListener('click', showMessage)
  },
  unmounted(el) {
    el.removeEventListener('click', showMessage)
  }
}
const message = ref('')
const showMessage = () => {
  message.value = 'Button clicked!'
}
</script>

<template>
  <div>
    <img v-error="setFallbackImage" :src="imageSrc" />
  </div>
</template>
<script setup>
import { directive } from 'vue'
const vError = directive('error', {
  mounted(el, binding) {
    el.addEventListener('error', () => {
      binding.value(el)
    })
  },
})
const imageSrc = 'image.jpg'
const setFallbackImage = (el) => {
  el.src = 'fallback.jpg'
}
</script>
<style scoped>
img {
  width: 200px;
  height: 200px;
}
</style>