vue3指令：点击元素移除指定类名

结构目录

• directives --------------------------------------------指令目录
  • index.ts-------------------------------------------统一注册
  • onClickRemoveClass.ts--------------------------点击元素移除指定类名的指令

1.index.ts文件

import type { App } from "vue";
// 引入同文件夹下所有ts文件，index文件除外
// 引入 views 文件夹下所有 vue 文件
const modules = import.meta.glob("./**/*.ts");
console.log("modules", modules);
// 动态注册所有指令

const directives = {
  install: function (app: App<Element>) {
    Object.keys(modules).forEach(async key => {
      if (key !== "./index.ts") {
        // 对key进行截取，只需要.ts之前 /之后
        const reg = //+(.*).ts/;
        const match = key.match(reg);
        const name = match?.[1];
        const direct = await modules[key]();
        console.log("name", name);
        // 注册所有自定义指令
        name && app.directive(name, (direct as any)?.default);
      }
    });
  }
};

export default directives;

2.onClickRemoveClass.ts文件

import type { Directive, DirectiveBinding } from "vue";
/**
 * @description 📚 点击元素移除指定类名
 * @param  {array} 需要移除类名的数组
 * @docs  v-on-click-remove-class
 * 1.单独注册：使用方式，在main.js中引入并注册
 * import onClickRemoveClass from './direct/onClickRemoveClass'
 * app.directive('on-click-remove-class', onClickRemoveClass);
 * 2.统一注册directives目录下所有指令：使用方式，在main.js中引入并注册
 * import directives from "@/directives";
 * app.use(directives);
 * 页面内直接使用
 *    <div v-on-click-remove-class="['class1', 'class2']">点 击我去除 class1 和 class2</div>
 **/

const removeClassDirective: Directive = {
  mounted(el: HTMLElement, binding: DirectiveBinding) {
    const classNames = binding.value;
    const handleClick = (event: MouseEvent) => {
      if (event.target instanceof Element && classNames) {
        if (Array.isArray(classNames)) {
          classNames.forEach(className => {
            el.classList.remove(className);
          });
        } else {
          el.classList.remove(classNames);
        }
      }
    };

    el.addEventListener("click", handleClick);
  }
};

export default removeClassDirective;

2.注册使用

1.单独注册

  // 单独注册：使用方式，在main.js中引入并注册
  import onClickRemoveClass from './direct/onClickRemoveClass'
  app.directive('on-click-remove-class', onClickRemoveClass);

1.统一注册

  // 统一注册directives目录下所有指令：使用方式，在main.js中引入并注册
 import directives from "@/directives";
 app.use(directives);

示例代码

<template>
  <div>
    <div
      class="target-element"
      v-on-click-remove-class="['target-element']"
    ></div>
  </div>
</template>

<script setup lang="ts"></script>
<style lang="less" scoped>
.target-element {
  height: 100px;
  background-color: pink;
}
</style>

效果演示