vue3自定义指令 vue中常用自定义指令

**Vue3 自定义指令**

在 Vue 中，自定义指令是非常有用的工具，可以让我们扩展框架的功能并且使我们的应用更加灵活。自定义指令可以用来实现各种复杂的逻辑，如数据绑定、事件处理等。

**什么是自定义指令？**

自定义指令是一种特殊的 Vue 组件，它们可以被用来扩展框架的功能并且使我们的应用更加灵活。自定义指令可以用来实现各种复杂的逻辑，如数据绑定、事件处理等。

**如何创建一个自定义指令？**

要创建一个自定义指令，我们需要在 Vue 的选项中添加一个 `directives` 属性，并且为每个自定义指令指定一个名称和一个函数。这个函数将会被用来实现自定义指令的逻辑。

javascript// main.jsimport { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.directive('my-directive', {
 // 这是自定义指令的名称 name: 'myDirective',
 // 这是自定义指令的函数 mounted(el, binding) {
 console.log('自定义指令被挂载了')
 // 这里可以写一些逻辑，如数据绑定、事件处理等 el.style.color = 'red'
 },
 // 这是自定义指令的函数 updated(el, binding) {
 console.log('自定义指令被更新了')
 // 这里可以写一些逻辑，如数据绑定、事件处理等 el.style.fontSize = '24px'
 }
})

app.mount('#app')

html<input v-focus>

javascript// main.jsimport { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

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

app.mount('#app')

html<div v-click-outside="handleClickOutside">
 <!-- 内容 -->
</div>

javascript// main.jsimport { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.directive('click-outside', {
 bind(el, binding) {
 const handler = event => {
 if (!el.contains(event.target)) {
 binding.value()
 }
 }
 document.addEventListener('click', handler)
 // 这里可以写一些逻辑，如数据绑定、事件处理等 el.style.background = 'red'
 },
 unbind(el, binding) {
 document.removeEventListener('click', handler)
 }
})

app.mount('#app')

html<input v-model="search" @input="handleInput">

javascript// main.jsimport { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.directive('debounce', {
 bind(el, binding) {
 let timeoutId el.addEventListener('input', event => {
 clearTimeout(timeoutId)
 timeoutId = setTimeout(() => {
 binding.value(event.target.value)
 },500)
 })
 },
 unbind(el) {
 clearTimeout(timeoutId)
 }
})

app.mount('#app')

html<input v-model="search" @input="handleInput">

javascript// main.jsimport { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.directive('throttle', {
 bind(el, binding) {
 let timeoutId el.addEventListener('input', event => {
 if (timeoutId) clearTimeout(timeoutId)
 timeoutId = setTimeout(() => {
 binding.value(event.target.value)
 },500)
 })
 },
 unbind(el) {
 clearTimeout(timeoutId)
 }
})

app.mount('#app')

html<div v-scroll="handleScroll">
 <!-- 内容 -->
</div>

javascript// main.jsimport { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.directive('scroll', {
 bind(el, binding) {
 const handler = event => {
 if (event.target.scrollTop + event.target.offsetHeight >= event.target.scrollHeight) {
 binding.value()
 }
 }
 el.addEventListener('scroll', handler)
 },
 unbind(el) {
 el.removeEventListener('scroll', handler)
 }
})

app.mount('#app')

html<div v-resize="handleResize">
 <!-- 内容 -->
</div>

javascript// main.jsimport { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.directive('resize', {
 bind(el, binding) {
 const handler = event => {
 if (event.target.offsetWidth !== el.offsetWidth || event.target.offsetHeight !== el.offsetHeight) {
 binding.value()
 }
 }
 window.addEventListener('resize', handler)
 },
 unbind(el) {
 window.removeEventListener('resize', handler)
 }
})

app.mount('#app')

html<div v-scroll-to="targetElement">
 <!-- 内容 -->
</div>

javascript// main.jsimport { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.directive('scroll-to', {
 bind(el, binding) {
 const targetElement = document.querySelector(binding.value)
 if (targetElement) {
 window.scrollTo({
 top: targetElement.offsetTop,
 behavior: 'smooth'
 })
 }
 }
})

app.mount('#app')

html<input v-focus-on-click>

javascript// main.jsimport { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.directive('focus-on-click', {
 bind(el, binding) {
 el.addEventListener('click', event => {
 event.target.focus()
 })
 }
})

app.mount('#app')

html<div v-disable-scroll>
 <!-- 内容 -->
</div>

javascript// main.jsimport { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.directive('disable-scroll', {
 bind(el, binding) {
 el.addEventListener('wheel', event => {
 event.preventDefault()
 })
 el.addEventListener('touchmove', event => {
 event.preventDefault()
 })
 }
})

app.mount('#app')

html<div v-disable-select>
 <!-- 内容 -->
</div>

javascript// main.jsimport { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.directive('disable-select', {
 bind(el, binding) {
 el.addEventListener('selectstart', event => {
 event.preventDefault()
 })
 el.addEventListener('mousedown', event => {
 event.preventDefault()
 })
 }
})

app.mount('#app')