import { Message } from 'ant-design-vue';
const vCopy = { //
  /*
    bind 鉤子函數(shù)，第一次綁定時(shí)調(diào)用，可以在這里做初始化設(shè)置
    el: 作用的 dom 對(duì)象
    value: 傳給指令的值，也就是我們要 copy 的值
  */
  bind(el, { value }) {
    el.$value = value; // 用一個(gè)全局屬性來存?zhèn)鬟M(jìn)來的值，因?yàn)檫@個(gè)值在別的鉤子函數(shù)里還會(huì)用到
    el.handler = () => {
      if (!el.$value) {
      // 值為空的時(shí)候，給出提示，我這里的提示是用的 ant-design-vue 的提示，你們隨意
        Message.warning('無(wú)復(fù)制內(nèi)容');
        return;
      }
      // 動(dòng)態(tài)創(chuàng)建 textarea 標(biāo)簽
      const textarea = document.createElement('textarea');
      // 將該 textarea 設(shè)為 readonly 防止 iOS 下自動(dòng)喚起鍵盤，同時(shí)將 textarea 移出可視區(qū)域
      textarea.readOnly = 'readonly';
      textarea.style.position = 'absolute';
      textarea.style.left = '-9999px';
      // 將要 copy 的值賦給 textarea 標(biāo)簽的 value 屬性
      textarea.value = el.$value;
      // 將 textarea 插入到 body 中
      document.body.appendChild(textarea);
      // 選中值并復(fù)制
      textarea.select();
      // textarea.setSelectionRange(0, textarea.value.length);
      const result = document.execCommand('copy');
      if (result) {
        Message.success('復(fù)制成功');
      }
      document.body.removeChild(textarea);
    };
    // 綁定點(diǎn)擊事件，就是所謂的一鍵 copy 啦
    el.addEventListener('click', el.handler);
  },
  // 當(dāng)傳進(jìn)來的值更新的時(shí)候觸發(fā)
  componentUpdated(el, { value }) {
    el.$value = value;
  },
  // 指令與元素解綁的時(shí)候，移除事件綁定
  unbind(el) {
    el.removeEventListener('click', el.handler);
  },
};
export default vCopy;

<template>
  <div>
    <input v-model="text" placeholder="輸入要復(fù)制的內(nèi)容" />
    <button v-copy="text">點(diǎn)擊復(fù)制</button>
  </div>
</template>
<script>
import vCopy from './directives';
export default {
  data () {
    return {
      text: '這是要復(fù)制的內(nèi)容'  // 默認(rèn)的復(fù)制內(nèi)容
    };
  },
  directives: {
    copy: vCopy
  }
};
</script>

let vCopy = {
  bind (el, { value }) {
    el.$value = value;
    el.handler = async () => {
      if (!el.$value) {
        console.log('沒有要復(fù)制的內(nèi)容');
        return;
      }
      try {
        // 直接使用 Clipboard API 復(fù)制
        await navigator.clipboard.writeText(el.$value);
        console.log('復(fù)制成功');
      } catch (err) {
        console.error('復(fù)制失敗', err);
      }
    };
    // 監(jiān)聽點(diǎn)擊事件
    el.addEventListener('click', el.handler);
  },
  componentUpdated (el, { value }) {
    el.$value = value;
  },
  unbind (el) {
    el.removeEventListener('click', el.handler);
  }
};
export default vCopy;

<template>
  <div>
    <input v-model="text" placeholder="輸入要復(fù)制的內(nèi)容" />
    <button v-copy="text">點(diǎn)擊復(fù)制</button>
  </div>
</template>
<script>
import vCopy from './directives';
export default {
  data () {
    return {
      text: '這是要復(fù)制的內(nèi)容'  // 默認(rèn)的復(fù)制內(nèi)容
    };
  },
  directives: {
    copy: vCopy
  }
};
</script>

<template>
  <div>
    <input v-model="text" placeholder="輸入要復(fù)制的內(nèi)容" />
    <button @click="copyToClipboard">點(diǎn)擊復(fù)制</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      text: '默認(rèn)要復(fù)制的內(nèi)容'
    };
  },
  methods: {
    copyToClipboard() {
      navigator.clipboard.writeText(this.text).then(() => {
        console.log('文本已成功復(fù)制到剪貼板');
      }).catch(err => {
        console.error('復(fù)制失敗', err);
      });
    }
  }
};
</script>