Clipboard 复制文本

$Clipboard({ text, fallback }) 返回 Promise，在按钮点击中调用并处理成功或失败。

效果预览可直接操作下方示例

修改文本后复制，再手动粘贴到下方输入框核对。数字 0 和空文本也可以复制。

正在加载示例…

<template>
  <div class="clipboard-demo">
    <label :for="textId" class="clipboard-demo__label">待复制文本</label>
    <el-input :id="textId" v-model="text" placeholder="输入要复制的文本，也可以留空" clearable />

    <div class="clipboard-demo__actions">
      <el-button type="primary" :loading="copying" @click="copy(text)">复制当前文本</el-button>
      <el-button :disabled="copying" @click="copy(0)">复制数字 0</el-button>
      <el-button :disabled="copying" @click="copy('')">复制空文本</el-button>
    </div>
    <el-checkbox v-model="fallback" :disabled="copying">允许兼容复制方式（fallback）</el-checkbox>

    <p class="clipboard-demo__status" :class="{ 'clipboard-demo__status--error': failed }" role="status" aria-live="polite">
      {{ message }}
    </p>

    <label :for="pasteId" class="clipboard-demo__label">手动粘贴核对</label>
    <div @paste="hasPasted = true">
      <el-input :id="pasteId"
                v-model="pastedText"
                type="textarea"
                :rows="3"
                placeholder="复制成功后，点击这里按 Ctrl / Cmd + V，或使用系统粘贴菜单"
                @input="hasPasted = true" />
    </div>
    <div class="clipboard-demo__verification" aria-live="polite">
      <p v-if="copiedText !== null">最近成功复制：<code>{{ JSON.stringify(copiedText) }}</code></p>
      <p>{{ verification }}</p>
    </div>
    <el-button size="small" @click="clearPaste">清空核对输入</el-button>
  </div>
</template>

<script setup>
import { computed, onBeforeUnmount, ref, useId } from 'vue'
import { $Clipboard } from '@smallwei/avue'

const instanceId = useId()
const textId = `clipboard-text-${instanceId}`
const pasteId = `clipboard-paste-${instanceId}`
const text = ref('订单 A001：已确认')
const pastedText = ref('')
const copiedText = ref(null)
const fallback = ref(true)
const copying = ref(false)
const failed = ref(false)
const hasPasted = ref(false)
const message = ref('点击复制按钮后，这里显示 Promise 的成功或失败结果。')
let active = true

const verification = computed(() => {
  if (copiedText.value === null) return '核对结果：请先成功复制一次。'
  if (!hasPasted.value) return '核对结果：等待手动粘贴；示例不会自动填入剪贴板内容。'
  return pastedText.value === copiedText.value
    ? '核对结果：输入内容与最近成功复制的文本一致。'
    : '核对结果：内容不一致，请确认粘贴的是最近复制的文本。'
})

async function copy(value) {
  if (copying.value) return
  copying.value = true
  failed.value = false
  message.value = '正在复制…'
  try {
    await $Clipboard({ text: value, fallback: fallback.value })
    if (!active) return
    copiedText.value = value === null || value === undefined ? '' : String(value)
    hasPasted.value = false
    message.value = copiedText.value === '' ? '空文本复制成功，请手动粘贴核对。' : '复制成功，请手动粘贴核对。'
  } catch (error) {
    if (!active) return
    failed.value = true
    message.value = `复制失败：${error instanceof Error ? error.message : String(error)}`
  } finally {
    if (active) copying.value = false
  }
}

function clearPaste() {
  pastedText.value = ''
  hasPasted.value = false
}

onBeforeUnmount(() => {
  active = false
})
</script>

<style scoped>
.clipboard-demo__label {
  display: block;
  margin: 8px 0;
  font-weight: 600;
}
.clipboard-demo__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.clipboard-demo__actions .el-button {
  margin-left: 0;
}
.clipboard-demo__status,
.clipboard-demo__verification {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--el-fill-color-light);
  overflow-wrap: anywhere;
}
.clipboard-demo__status--error {
  color: var(--el-color-danger);
}
.clipboard-demo__verification {
  margin: 12px 0;
}
.clipboard-demo__verification p {
  margin: 4px 0;
}
.clipboard-demo__verification code {
  white-space: pre-wrap;
  word-break: break-word;
}
</style>

参数	类型	默认值	说明
text	string / number / null / undefined	必传字段	数字转字符串，null/undefined 视为空字符串
fallback	boolean	true	现代 API 不可用或被拒绝时，尝试兼容方式

成功返回 Promise<void>，失败时拒绝。浏览器权限、安全上下文和用户操作要求会影响结果；不要在调用前就显示“复制成功”。详见全局 API。