vue3 自定义指令实现一键复制

复制的内容是ctrl+c的内容 

<template>
  <div>
    <h1>一键复制</h1>
    <div class="copy-content">{{innerText}}</div>
    <button v-copy:innerText="'复制'">一键复制</button>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const innerText = ref("即将被复制");

// 在 <script setup> 中，任何以 v 开头的驼峰式命名的变量都可以被用作一个自定义指令。
const vCopy = {
  mounted(el:any, { value }) {
    el.$value = value; // 用一个全局属性来存传进来的值，因为这个值在别的钩子函数里还会用到
    
    el.handler = (e:any) => {
        
        // 值为空的时候，给出提示
        if (!el.$value) return console.log("无复制内容");
      
        copy();

    function copy(){
      const result = document.execCommand("Copy");
      if (result) paste();

        async function paste() {
            try {
                // 第一次会弹出是否要粘贴剪贴板内容弹窗
                const text = await navigator.clipboard.readText();
                innerText.value = text || "值不正确";
            } catch (err) {
                console.log("粘贴失败！", err);
            }
        };
    };
    }

    // 绑定点击事件，就是所谓的一键 copy 啦
    el.addEventListener("click", el.handler);
  },
  // 当传进来的值更新的时候触发
  updated(el:any, { value }) {
    el.$value = value;
  },
  // 指令与元素解绑的时候，移除事件绑定
  unmounted(el: any) {
    el.removeEventListener("click", el.handler);
  }
};
</script>