Vue自定义指令技术问询：点击元素切换预定义类的实现方案

Vue3 实现方案 #

我们可以注册一个全局指令，默认切换.active类，还支持传入自定义类名：

// main.js
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.directive('toggle-class', {
  mounted(el, binding) {
    // 默认切换active类，也可以接受自定义类名参数
    const className = binding.value || 'active'
    
    // 定义点击切换类的函数
    const toggleClass = () => {
      el.classList.toggle(className)
    }
    
    // 给元素绑定点击事件
    el.addEventListener('click', toggleClass)
    
    // 把函数存到el上，方便卸载时移除事件
    el._toggleClassHandler = toggleClass
  },
  unmounted(el) {
    // 组件卸载时移除事件监听，避免内存泄漏
    el.removeEventListener('click', el._toggleClassHandler)
    delete el._toggleClassHandler
  }
})

app.mount('#app')

使用方式超级简单：

• 切换默认的.active类：

<div v-toggle-class>点击切换active类</div>

• 切换自定义类：

<div v-toggle-class="'highlight'">点击切换highlight类</div>

Vue2 实现方案 #

Vue2的指令钩子和Vue3略有不同，我们用bind钩子绑定事件，unbind钩子清理：

// main.js
import Vue from 'vue'
import App from './App.vue'

Vue.directive('toggle-class', {
  bind(el, binding) {
    const className = binding.value || 'active'
    
    const toggleClass = () => {
      el.classList.toggle(className)
    }
    
    el.addEventListener('click', toggleClass)
    el._toggleClassHandler = toggleClass
  },
  unbind(el) {
    el.removeEventListener('click', el._toggleClassHandler)
    delete el._toggleClassHandler
  }
})

new Vue({
  render: h => h(App)
}).$mount('#app')

使用方式和Vue3完全一致，直接给元素加指令就完事了～

这里额外提个细节：我们把切换函数存在元素实例上，是为了在组件卸载时能精准移除事件监听，避免内存泄漏，这个小细节可别忽略哦！

内容的提问来源于stack exchange，提问作者panthro