v-copy 指令

概述

• 点击元素后将文本写入剪贴板，支持传入字符串或配置对象。
• 可自定义成功/失败提示、回调函数。

基本用法

查看代码

<script setup lang="ts">
/**
 * 函数：复制成功回调
 * 作用：在复制成功时执行后续逻辑（如上报或提示）
 */
function onCopySuccess() {
  console.log('复制成功')
}

/**
 * 函数：复制失败回调
 * 作用：在复制失败时做降级处理（如提示或重试）
 */
function onCopyError(err: Error) {
  console.error('复制失败:', err.message)
}
</script>

<template>
  <n-flex>
    <!-- 复制元素文本 -->
    <n-button v-copy>
      点击复制我自己的文本
    </n-button>

    <!-- 复制固定字符串 -->
    <n-button v-copy="'固定字符串'">
      复制固定字符串
    </n-button>

    <!-- 传对象：自定义文本与回调 -->
    <n-button
      v-copy="{ text: '需要复制的内容', onSuccess: onCopySuccess, onError: onCopyError, successText: '已复制', errorText: '复制失败' }"
    >
      复制对象配置
    </n-button>
  </n-flex>
</template>

组合示例

模式	用法示例	说明
复制元素文本	v-copy	自动复制绑定元素的 innerText（或 textContent）
复制指定字符串	v-copy="'内容'"	直接传入要复制的字符串字面量
配置对象（基础）	v-copy="{ text: '内容', successText: '已复制' }"	通过对象指定复制内容和成功提示文案（如用于 Toast）
配置对象（带回调）	v-copy="{ text: '内容', onSuccess, onError }"	支持自定义成功/失败回调函数： - onSuccess(text: string)：复制成功时触发 - onError(error: Error)：复制失败时触发（如浏览器权限拒绝）