CopyButton 复制按钮

一键复制文本的按钮组件，支持 Clipboard API 和兼容性降级处理。

💡 使用场景：在用户管理、系统配置等页面中用于复制手机号、密钥等信息。

基本用法

<template>
  <div class="flex items-center gap-2">
    <span>{{ text }}</span>
    <CopyButton :text="text" />
  </div>
</template>

<script setup lang="ts">
const text = ref('这是要复制的文本')
</script>

表格中使用

<template>
  <el-table :data="tableData">
    <el-table-column label="手机号" prop="mobile">
      <template #default="{ row }">
        <span>{{ row.mobile }}</span>
        <CopyButton v-if="row.mobile" :text="row.mobile" />
      </template>
    </el-table-column>
  </el-table>
</template>

自定义样式

<template>
  <CopyButton :text="text" :style="{ marginLeft: '8px' }">
    <el-icon><DocumentCopy /></el-icon>
  </CopyButton>
</template>

自定义内容

<template>
  <CopyButton :text="text">
    <el-button type="primary" size="small">复制链接</el-button>
  </CopyButton>
</template>

Props

参数	说明	类型	默认值
text	要复制的文本	string	''
style	自定义样式	object	{}

Slots

插槽名	说明
default	自定义按钮内容

功能特性

• ✅ Clipboard API 支持
• ✅ 兼容性降级处理
• ✅ 复制成功/失败提示
• ✅ 自定义按钮内容

使用场景

• 复制手机号
• 复制链接
• 复制邀请码
• 复制任意文本