VUE获取后台数据，并循环，实现列表元素点击复制功能

• copyOrderNum 函数：这个函数会在点击 <p> 标签时被调用，并将 item.orderNum 的值传递给 ClipboardJS。
• 隐藏的按钮：ClipboardJS 需要一个实际的 DOM 元素来触发复制操作，因此我们添加了一个隐藏的按钮，并通过 document.querySelector('.copy-order-num').click() 来模拟点击。
• 销毁 ClipboardJS 实例：为了避免内存泄漏，每次复制操作完成后都会销毁 ClipboardJS 实例。

这样，当用户点击 <p> 标签时，item.orderNum 的值就会被复制到剪贴板，并且会显示一个成功的提示消息。

<template>
  <div>
    <p
      v-for="(item, index) in DiyTableData"
      :key="index"
      @click="copyOrderNum(item.orderNum)"
    >
      {{ item.orderNum }}
    </p>
    <button class="copy-order-num" style="display: none;"></button>
  </div>
</template>

<script setup>
import { ref } from "vue";
import ClipboardJS from 'clipboard';
import { ElMessage } from 'element-plus';

const DiyTableData = ref([
  { orderNum: '12345' },
  { orderNum: '67890' },
  // 其他数据...
]);

const copyOrderNum = (orderNum) => {
  const clipboard = new ClipboardJS('.copy-order-num', {
    text: () => orderNum
  });

  clipboard.on('success', () => {
    ElMessage({
      message: '复制成功',
      type: 'success',
    });
    clipboard.destroy(); // 销毁实例以避免内存泄漏
  });

  clipboard.on('error', () => {
    ElMessage({
      message: '复制失败',
      type: 'error',
    });
    clipboard.destroy(); // 销毁实例以避免内存泄漏
  });

  // 模拟点击事件以触发复制
  document.querySelector('.copy-order-num').click();
};
</script>