v-copy 指令

介绍

v-copy 指令用于实现对组件内容的复制功能。当用户点击带有该指令的元素时，会自动复制元素的文本内容到剪贴板，并在复制成功或失败时提供相应的反馈。

使用方法

将 v-copy 指令添加到需要支持复制功能的元素上：

世界上有太多孤独的人，害怕先踏出第一步。———《绿皮书》

点击上方文本区域即可复制文本内容

查看代码

<script setup lang="ts">
import { ref } from 'vue'
import { vCopy } from '@cp-vuedir/core'

const text = ref('世界上有太多孤独的人，害怕先踏出第一步。———《绿皮书》')
</script>

<template>
  <div class="demo-container">
    <p v-copy class="copy-text" title="点击复制">
      {{ text }}
    </p>
    <p class="demo-tip">点击上方文本区域即可复制文本内容</p>
  </div>
</template>

<style scoped>
.demo-container {
  padding: 1rem;
  border: 1px solid var(--vp-c-divider-light);
  border-radius: 8px;
  background-color: var(--vp-c-bg-soft);
}

.copy-text {
  padding: 1rem;
  background-color: var(--vp-c-bg);
  color: var(--vp-c-text-1);
  border: 1px solid var(--vp-c-divider);
  border-radius: 4px;
  margin-bottom: 1rem;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
}

.copy-text:hover {
  background-color: var(--vp-c-bg-soft);
  border-color: var(--vp-c-brand);
}

.demo-tip {
  margin: 0;
  color: var(--vp-c-text-2);
  font-size: 0.9rem;
}
</style>

注意事项

复制状态反馈

• 当复制成功时，会在元素上显示一个绿色的提示信息。
• 当复制失败时，会在元素上显示一个红色的提示信息。

注意浏览器兼容

需要浏览器支持 Clipboard API