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>

表格中使用

<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>

自定义内容

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

Props

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

Slots

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