vue3封装指令集（全局实现复制方法）

v-copy全局指令实现

原生方法实现：

copyText.ts

import { ElMessage } from "element-plus";
import { Directive } from "vue";
/**
 * 原生copy方法
 */
const copyText = (text: string): boolean => {
   const textarea = document.createElement('textarea')
   textarea.value = text
   document.body.appendChild(textarea)
   textarea.select()
   const successful = document.execCommand('copy')
   if (successful) {
     ElMessage.success('复制成功')
   } else {
     ElMessage.error('复制失败')
   }
   document.body.removeChild(textarea)
   return successful
 }
 const copy: Directive = {
   mounted(el, binding) {
     el.addEventListener('click',() => {
       if (binding.value) {
         const text = typeof binding.value === 'string' ? binding.value : binding.value.text
         copyText(text)
       }
     })
   }
 }
export default copy;

index.ts(多个指令)

import copy from './copyText' // 上述copyText.ts
import type { App } from 'vue'

const directivesList: any = {
  copy
};
const directives = {
  install: function (app: App<Element>) {
    Object.keys(directivesList).forEach(key => {
      // 注册自定义指令
      app.directive(key, directivesList[key]);
  	});
  }
};
export default directives

main.ts（全局挂载）

import { createApp } from "vue";
import directive from '@/directive/index';
const app = createApp(App);
app.use(directive).mount("#app");

组件内调用

<el-link
   v-copy="要复制的内容"
   type="primary"
   :underline="false"
   ><el-icon><CopyDocument /></el-icon
></el-link>

vue-clipboard3实现

安装依赖：

pnpm install --save vue-clipboard3

提示：这里只需修改copyText.ts文件即可

import { ElMessage } from "element-plus";
import { Directive } from "vue";
import useClipboard from "vue-clipboard3";

/**
 * vue-clipboard3复制方法
 */
const copyText = (text: string) => {
  const { toClipboard } = useClipboard()
  return new Promise((resolve, reject) => {
    try {
      toClipboard(text)
      ElMessage.success('复制成功')
      resolve(text)
    } catch (e) {
      ElMessage.error('复制失败')
      reject(e)
    }
  })
}
const copy: Directive = {
  mounted(el, binding) {
    el.addEventListener('click',() => {
      if (binding.value) {
        const text = typeof binding.value === 'string' ? binding.value : binding.value.text
        copyText(text)
      }
    })
  }
}
export default copy;