vue3下复制到剪贴板:

<template>
  <div class="font-normal flex">
    <!-- 链接容器 -->
    <div ref="linkText" class="max-w-[220px] overflow-hidden text-ellipsis whitespace-nowrap">
      https://github.com/gspgsp
    </div>
    <!-- 图标按钮 -->
    <MIcon name="content_copy" size="sm" @click="copyToClipboard" />
  </div>
</template>
  
<script setup lang=ts>
import { ref } from 'vue';
  
// 用于获取链接内容的 ref
const linkText = ref(null);
  
// 复制到剪贴板的方法
const copyToClipboard = () => {
  if (linkText.value) {
    // 获取链接的文本内容
    const textToCopy = linkText.value.textContent;
    // 使用 Clipboard API 复制文本
    navigator.clipboard.writeText(textToCopy)
      .then(() => {
        alert('链接已复制到剪贴板！');
      })
      .catch(err => {
        console.error('复制失败：', err);
      });
  }
};
</script>
  
分析:
navigator.clipboard.writeText 是 Web Clipboard API 的一部分，用于将文本写入用户的剪贴板。这是一个现代浏览器中提供的异步方法，可以安全、便捷地完成剪贴板操作。
  
参数
text: 要复制到剪贴板的字符串。
  
返回值
Promise<void>: 返回一个 Promise，表示复制操作的完成状态。
如果成功，Promise 会被解析。
如果失败，Promise 会被拒绝，并返回错误。
  
将上面的方法封装到utils里:
// /utils/clipboard.ts
export const copyToClipboard = async (text: string): Promise<boolean> => {
  try {
    await navigator.clipboard.writeText(text);
    return true;
  } catch (err: any) {
    console.error("copy failed:", err);
    return false;
  }
};
  
使用:
import { copyToClipboard } from '@/utils/clipboard';
  
const isToastVisible = ref(false);
const linkText = ref(null);
const handleCopy = async () => {
  if (linkText.value) {
    const textToCopy = linkText.value.textContent || "";
    const result = await copyToClipboard(textToCopy);
    if (result) {
      isToastVisible.value = true;
    }
  }
};
  
分析:
Promise<boolean> 是对一个 返回值类型为 boolean 的 Promise 的声明，表示函数是异步的，并且会返回一个带有 boolean 类型值的 Promise。
  
具体含义
Promise:
  
是 JavaScript 中表示异步操作结果的对象。
它的状态可以是 pending（进行中）、fulfilled（已成功） 或 rejected（已失败）。
boolean 类型:
  
这里 boolean 指定了 Promise 被 fulfilled（成功）时解析的值是 true 或 false。
如果 Promise 被 rejected（失败），它不会返回 boolean 值，而是进入 catch 块。
  
  
关于Promise拓展:
function getData(condition: boolean): Promise<string> {
  if (condition) {
    return Promise.resolve("Immediate response"); // 如果满足条件，直接返回完成的 Promise
  } else {
    return new Promise((resolve) => setTimeout(() => resolve("Delayed response"), 1000)); // 模拟异步
  }
}
  
// 使用
getData(true).then(console.log); // 输出: Immediate response
getData(false).then(console.log); // 1 秒后输出: Delayed response