从v-clipboard3开始学习封装vue3指令集

最近得空用vue3重构老项目的时候，发现剪切组件vue-clipboard3只提供了一个组合式的api，v2版本的指令似乎漏掉了，正好趁着搞起的机会，思考一下项目库的指令集如何封装。

思路

1. 为指令集单独建立一个文件夹
2. 导出index.ts提供一个Plugin对象，对象中集体安装所有指令 文件结构如下：

index.ts的内容也比较容易实现：

//index.ts
import { ObjectDirective, App, Plugin } from "vue";

// 自定义指令 可以引用多个
import vClipboard from "./vClipboard";

// 定义指令选项类别 
export interface DirectiveOption {
  name: string; // 指令名称
  options: ObjectDirective; //指令选项
}

// 构建指令集
const directives: DirectiveOption[] = [vClipboard];

export default <Plugin>{
  install: (app: App) => {
 // 安装指令集
    directives.forEach((item) => {
      app.directive(item.name, item.options);
    });
  },
};

3. 当如如果我们想使用按需引用 也可以把各个指令单独export出去

vClipboard3的指令实现

1. 原vClipboard2提供的指令为v-clipboard:copy、v-clipboard:success、v-clipboard:error
2. vue3指令当然也支持动态指令参数
3. 我们只需针对这几个指令参数做相应处理
4. copy 接受需要copy的值
5. success 接受copy成功的回调
6. error 接受copy失败的回调
7. 我们的指令支持点击copy 基于以上几条代码实现如下：

// vClipboard.ts

import { DirectiveOption } from "./index";
// vue-clipboard3 提供的 composition api
import useClipboard from "vue-clipboard3";
const { toClipboard } = useClipboard();
export default <DirectiveOption>{
  name: "clipboard",
  options: {
   // 挂载
    mounted(el, binding) {
     // binding.arg 为动态指令参数
     // 由于 指令是支持响应式的 因此我们指令需要有一个“全局”对象，这里我们为了不借助其他对象浪费资源，就直接使用el自身了
     // 将copy的值 成功回调 失败回调 及 click事件都绑定到el上 这样在更新和卸载时方便操作
      switch (binding.arg) {
        case "copy":
        // copy值
          el.clipValue = binding.value;
        // click事件
          el.clipCopy = function () {
            toClipboard(el.clipValue)
              .then(result => {
                el.clipSuccess && el.clipSuccess(result);
              })
              .catch(err => {
                el.clipError && el.clipError(err);
              });
          };
        // 绑定click事件
          el.addEventListener("click", el.clipCopy);
          break;
        case "success":
        // 成功回调
          el.clipSuccess = binding.value;
          break;
        case "error":
        // 失败回调
          el.clipError = binding.value;
          break;
      }
    },
  // 相应修改 这里比较简单 重置相应的值即可
    updated(el, binding) {
      switch (binding.arg) {
        case "copy":
          el.clipValue = binding.value;
          break;
        case "success":
          el.clipSuccess = binding.value;
          break;
        case "error":
          el.clipError = binding.value;
          break;
      }
    },
  // 卸载 删除click事件 删除对应的自定义属性
    unmounted(el, binding) {
      switch (binding.arg) {
        case "copy":
          el.removeEventListener("click", el.clipCopy);
          delete el.clipValue;
          delete el.clipCopy;
          break;
        case "success":
          delete el.clipSuccess;
          break;
        case "error":
          delete el.clipError;
          break;
      }
    },
  },
};

使用

1. 全局挂载

import { createApp } from 'vue'
import DirectiveExtensions from './directive'
import App from './App.vue'
const app = createApp(App)
app.use(DirectiveExtensions)
app.mount('#app')

2. 组件使用

<template>
  <section class="test-component-copy">
        <div
          class="btn-copy"
          v-clipboard:copy="content"
          v-clipboard:success="Copy"
          v-clipboard:error="Error"
        >{{ content }}</div>
      </div>
  </section>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { toast } from '../../../components/toast/useToast'
const content = ref("请在代码中手动输入需要拷贝的内容！")
function Copy() {
  toast('内容已复制到剪贴板！');
}
function Error() {
  toast('复制错误！');
}
</script>

指令封装的粒度与位置

1. vue3提供了在setup中自定义指令的方法
2. 因此我们需要一个权衡，一般来说比较通用的指令我们建议直接放入指令集
3. 如果指令不通用，可以单独在setup中自定义，不过我的感觉如果指令不通用，那么就没必要存在

谢谢阅读