BizCopyText 复制文本

文本 + 复制图标，点击一键复制到剪贴板（Clipboard API 优先，document.execCommand 降级），成功后图标变对勾 1.5 秒。支持多行省略截断 + tooltip 展示全文，以及「显示与复制分离」（脱敏展示、复制完整值）。

基础用法

订单号：SO20260921000382

支付说明：支付回调通知：订单 SO20260921000382 已于 2026-09-21 14:32:11 完成支付，支付渠道为线上商城-微信支付，实付金额 1,299.00 元，优惠金额 101.00 元，交易流水号 4200002389202609219837261532，如有疑问请联系客服处理。

订单号直接复制；长文本 lines 截断为两行省略号，hover tooltip 展示全文，点击复制完整内容。

<script setup lang="ts">
/** 基础用法：订单号一键复制 + 长文本两行省略（tooltip 看全文，复制完整内容） */
import { ElMessage } from 'element-plus'
import { BizCopyText } from 'vue3-ep-biz-lib'

const orderNo = 'SO20260921000382'

const longText =
  '支付回调通知：订单 SO20260921000382 已于 2026-09-21 14:32:11 完成支付，支付渠道为线上商城-微信支付，实付金额 1,299.00 元，优惠金额 101.00 元，交易流水号 4200002389202609219837261532，如有疑问请联系客服处理。'

const onSuccess = (): void => {
  ElMessage.success('已复制到剪贴板')
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 16px; max-width: 480px">
    <div>
      订单号：<BizCopyText :text="orderNo" @success="onSuccess" />
    </div>
    <div>
      支付说明：<BizCopyText :text="longText" :lines="2" @success="onSuccess" />
    </div>
  </div>
</template>

显示代码

脱敏展示与编程式复制

脱敏展示，复制完整卡号（text 展示 / copy-text 复制分离）：

6222 **** **** 7890

default 插槽自定义展示（复制内容仍取 text，tooltip 显示 text 全文）：

sk-live-a9f3····

copy() 编程式复制（外部按钮触发同一实例）：

sk-live-********

sk-live-a9f3c2e81b7d64e5f0aa

copy-text 与 text 分离：脱敏卡号展示、复制完整卡号；default 插槽接管展示内容；copy() 可由外部按钮对同一实例编程式触发复制。

<script setup lang="ts">
/** 进阶：脱敏展示与复制内容分离（copy-text）、default 插槽自定义展示、copy() 编程式复制 */
import { ref } from 'vue'
import { ElButton, ElMessage } from 'element-plus'
import { BizCopyText } from 'vue3-ep-biz-lib'
import type { BizCopyTextInstance } from 'vue3-ep-biz-lib'

const cardNo = '6222 0212 3456 7890'
const maskedCard = `${cardNo.slice(0, 4)} **** **** ${cardNo.slice(-4)}`

const apiKey = 'sk-live-a9f3c2e81b7d64e5f0aa'
const keyRef = ref<BizCopyTextInstance>()
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 16px; max-width: 480px">
    <div>
      <p style="margin: 0 0 4px; font-size: 13px; color: var(--el-text-color-secondary)">脱敏展示，复制完整卡号（text 展示 / copy-text 复制分离）：</p>
      <BizCopyText :text="maskedCard" :copy-text="cardNo" @success="ElMessage.success('已复制完整卡号')" />
    </div>
    <div>
      <p style="margin: 0 0 4px; font-size: 13px; color: var(--el-text-color-secondary)">default 插槽自定义展示（复制内容仍取 text，tooltip 显示 text 全文）：</p>
      <BizCopyText :text="apiKey" :lines="1">
        <span style="font-family: monospace">{{ apiKey.slice(0, 12) }}····</span>
      </BizCopyText>
    </div>
    <div>
      <p style="margin: 0 0 4px; font-size: 13px; color: var(--el-text-color-secondary)">copy() 编程式复制（外部按钮触发同一实例）：</p>
      <div style="display: flex; gap: 8px; align-items: center">
        <span style="font-family: monospace; color: var(--el-text-color-regular)">{{ apiKey.slice(0, 8) }}********</span>
        <ElButton size="small" type="primary" plain @click="keyRef?.copy()">复制完整密钥</ElButton>
      </div>
      <BizCopyText ref="keyRef" :text="apiKey" :show-tooltip="false" style="visibility: hidden; width: 0; display: inline-block; overflow: hidden" />
    </div>
  </div>
</template>

显示代码

详情字段组复制

工单号WO20260923000417

支付流水号4200****3726

回调地址https://open-gateway.example-corp.cn/v3/pay/callback?channel=wxpay&merchant=M200001288&sign=a9f3c2e81b7d64e5f0aa7c12

工单详情场景：单号直复制、支付流水号脱敏展示但复制完整值（copy-text 分离）、回调地址超长单行截断——一组字段三种复制策略。

<script setup lang="ts">
/** 场景：工单详情字段组——单号 / 脱敏流水号 / 超长回跳链接 一键复制 */
import { ElMessage } from 'element-plus'
import { BizCopyText } from 'vue3-ep-biz-lib'

const callbackUrl =
  'https://open-gateway.example-corp.cn/v3/pay/callback?channel=wxpay&merchant=M200001288&sign=a9f3c2e81b7d64e5f0aa7c12'

const onSuccess = (): void => {
  ElMessage.success('已复制')
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; max-width: 520px">
    <div style="display: flex; gap: 12px; align-items: baseline">
      <span style="width: 88px; font-size: 13px; color: var(--el-text-color-secondary)">工单号</span>
      <BizCopyText text="WO20260923000417" @success="onSuccess" />
    </div>
    <div style="display: flex; gap: 12px; align-items: baseline">
      <span style="width: 88px; font-size: 13px; color: var(--el-text-color-secondary)">支付流水号</span>
      <!-- 展示脱敏尾部四位，复制完整流水号 -->
      <BizCopyText text="4200****3726" copy-text="4200002389202609239837261532" @success="onSuccess" />
    </div>
    <div style="display: flex; gap: 12px; align-items: baseline">
      <span style="width: 88px; font-size: 13px; color: var(--el-text-color-secondary)">回调地址</span>
      <BizCopyText :text="callbackUrl" :lines="1" @success="onSuccess" />
    </div>
  </div>
</template>

显示代码

协作分享链接

需求评审资料72 小时后失效仅登录可访问

https://s.example.cn/r/9f2k3d复制后发送给协作者；链接到期或文档删除后自动失效

分享场景：短链一键复制 + 有效期 / 访问控制徽标；复制成功提示定制。

<script setup lang="ts">
/** 场景：协作分享链接——短链复制 + 有效期 + 访问控制说明 */
import { ElMessage, ElTag } from 'element-plus'
import { BizCopyText } from 'vue3-ep-biz-lib'
</script>

<template>
  <div style="max-width: 480px; border: 1px solid var(--el-border-color-lighter); border-radius: 6px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px">
    <div style="display: flex; align-items: center; gap: 8px">
      <span style="font-weight: 600">需求评审资料</span>
      <ElTag size="small" type="warning">72 小时后失效</ElTag>
      <ElTag size="small" type="info">仅登录可访问</ElTag>
    </div>
    <BizCopyText text="https://s.example.cn/r/9f2k3d" @success="ElMessage.success('链接已复制，快去分享吧')" />
    <span style="font-size: 13px; color: var(--el-text-color-secondary)">复制后发送给协作者；链接到期或文档删除后自动失效</span>
  </div>
</template>

显示代码

会议信息卡

会议号921-668-035

入会密码802966

入会链接https://meet.example.cn/j/921668035?pwd=802966

周三 14:00 · 产品迭代评审 · 8 人受邀

会议场景：会议号 / 密码 / 入会链接三项分组复制，各自成功提示（「已复制会议号」）。

<script setup lang="ts">
/** 场景：线上会议信息卡——会议号/密码/入会链接三项一键复制 */
import { ElMessage } from 'element-plus'
import { BizCopyText } from 'vue3-ep-biz-lib'

const fields = [
  { label: '会议号', value: '921-668-035' },
  { label: '入会密码', value: '802966' },
  { label: '入会链接', value: 'https://meet.example.cn/j/921668035?pwd=802966' },
]
</script>

<template>
  <div style="max-width: 440px; border: 1px solid var(--el-border-color-lighter); border-radius: 6px; padding: 4px 16px">
    <div
      v-for="field in fields"
      :key="field.label"
      style="display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--el-border-color-lighter)"
    >
      <span style="font-size: 13px; color: var(--el-text-color-secondary); flex-shrink: 0">{{ field.label }}</span>
      <BizCopyText :text="field.value" @success="ElMessage.success(`已复制${field.label}`)" />
    </div>
    <div style="padding: 10px 0; font-size: 13px; color: var(--el-text-color-secondary)">周三 14:00 · 产品迭代评审 · 8 人受邀</div>
  </div>
</template>

显示代码

批量任务结果

成功9 月对账单导出TASK-20260923-0142https://files.example.cn/export/0142.xlsx

失败用户画像圈选TASK-20260923-0143

异步任务场景：成功行复制任务号 + 下载直链（长 URL 单行截断），失败行只复制任务号便于报障。

<script setup lang="ts">
/** 场景：批量任务结果列表——任务号与下载直链分开复制 */
import { ElTag } from 'element-plus'
import { BizCopyText } from 'vue3-ep-biz-lib'

const tasks = [
  { id: 'TASK-20260923-0142', name: '9 月对账单导出', status: 'done', url: 'https://files.example.cn/export/0142.xlsx' },
  { id: 'TASK-20260923-0143', name: '用户画像圈选', status: 'failed', url: '—' },
]
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 8px; max-width: 560px">
    <div
      v-for="task in tasks"
      :key="task.id"
      style="display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--el-border-color-lighter); border-radius: 6px"
    >
      <ElTag :type="task.status === 'done' ? 'success' : 'danger'" size="small">{{ task.status === 'done' ? '成功' : '失败' }}</ElTag>
      <span style="min-width: 96px; font-size: 13px">{{ task.name }}</span>
      <BizCopyText :text="task.id" />
      <BizCopyText v-if="task.status === 'done'" :text="task.url" :lines="1" style="flex: 1; color: var(--el-color-primary)" />
    </div>
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
text	string	—（必填）	显示（且默认被复制）的文本
copy-text	string	—	实际复制内容，缺省同 text（显示与复制分离场景）
show-tooltip	boolean	true	hover tooltip 展示全文
lines	number	—	超出指定行数省略截断（1 = 单行省略）；不传完整展示

Events

事件名	参数	说明
success	—	复制成功
error	(error)	复制失败（两种方式均不可用）

Slots

插槽名	说明
default	覆盖显示内容（复制内容仍由 text / copy-text 决定）

Expose

属性/方法	说明
copy()	主动触发复制