微信咨询

微信咨询

13610*910*9

服务热线 7*24小时

电话咨询

vue实现列表循环复制元素功能

iamdu2025-01-27 22:51:24 浏览: 1139

代码解释

  • 在模板中,使用 v-for 指令循环渲染多个 <p> 标签,并将所有标签的引用存储在 copyTextElements 数组中。
  • 在 onMounted 钩子中,遍历 copyTextElements 数组,为每个元素创建一个 ClipboardJS 实例,并设置要复制的文本为对应的数组项。
  • 监听 success 和 error 事件来处理复制成功和失败的情况。
  • 在 onUnmounted 钩子中销毁每个 ClipboardJS 实例,避免内存泄漏。
<template>
  <div>
    <!-- 使用 v-for 循环渲染多个 p 标签 -->
    <p
      v-for="(text, index) in copyTexts"
      :key="index"
      ref="copyTextElements"
    >
      {{ text }}
    </p>
    <p v-if="copySuccess">复制成功!</p>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import ClipboardJS from 'clipboard';

// 定义要复制的文本数组
const copyTexts = [
  '这是第一条需要复制的文本内容。',
  '这是第二条需要复制的文本内容。',
  '这是第三条需要复制的文本内容。'
];
// 创建一个 ref 数组来引用所有文本元素
const copyTextElements = ref([]);
// 记录复制是否成功的状态
const copySuccess = ref(false);

onMounted(() => {
  // 遍历所有文本元素,为每个元素创建 ClipboardJS 实例
  copyTextElements.value.forEach((element, index) => {
    const clipboard = new ClipboardJS(element, {
      text: () => copyTexts[index]
    });

    // 处理复制成功事件
    clipboard.on('success', () => {
      copySuccess.value = true;
      setTimeout(() => {
        copySuccess.value = false;
      }, 3000);
    });

    // 处理复制失败事件
    clipboard.on('error', (e) => {
      console.error('复制失败:', e);
    });

    // 在组件卸载时销毁 ClipboardJS 实例
    onUnmounted(() => {
      clipboard.destroy();
    });
  });
});
</script>

<style scoped>
/* 可以为文本添加一些样式,让它看起来更像可点击的 */
p {
  cursor: pointer;
  color: blue;
  text-decoration: underline;
}
</style>

欢迎留下你的看法

共 0 条评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注