历史小剧场

说话如水，要“软”；做事如山，要“硬”。将刚柔并济，所向披靡。—《曾国藩家书》

前言

在一些需求当中，比如一些报表。他会有指定的ID，为了实施人员方便制作报表及调试，我们会实现报表ID的复制功能。方便调试。

方法一：document.execCommand()方法

该方法是在documen对象下的方法，现已被弃用。但是仍然可以使用。
在使用这个方法时，单行复制和多行复制要分开来使用。

1. 单行复制

主要通过创建动态input标签来实现

<ElInput type="text" style={{ width: "100%" }} placeholder="输入内容" v-model={data1.value} />
<br />
<ElButton plain type="primary" onClick={() => handleCopy1(data1.value)}>点击复制</ElButton>

/**
* @param data 需要复制的内容
*/
const handleCopy1 = (data: string) => {
   /** 创建input元素 */
   const inputEle: HTMLInputElement = document.createElement("input")
   /** 添加需要复制的内容到value属性 */
   inputEle.value = data;
   /** 向页面底部追加输入框 */
   document.body.appendChild(inputEle)
   /** 选择input元素 */
   inputEle.select()
   /** 执行复制命令 */
   document.execCommand("Copy")
   /** 弹出提示 */
   $alert({ text: "复制成功", type: "success" })
   /** 删除动态创建的input元素（复制之后再删除元素，否则无法成功赋值） */
   inputEle.remove()
}

2. 多行复制

主要通过创建动态textarea来实现

<ElInput type="textarea" autosize style={{ width: "100%" }} placeholder="输入内容" v-model={data2.value} />
<br />
<ElButton plain type="primary" onClick={() => handleCopy2(data2.value)}>点击复制</ElButton>

/**
* @param data 需要复制的内容
*/
const handleCopy2 = (data: string) => {
  /** 创建textarea元素 */
  const textareaEle: HTMLTextAreaElement = document.createElement("textarea")
  /** 添加需要复制的内容到value属性 */
  textareaEle.value = data;
  /** 向页面底部追加输入框 */
  document.body.appendChild(textareaEle)
  /** 选择textarea元素 */
  textareaEle.select()
  /** 执行复制命令 */
  document.execCommand("Copy")
  /** 弹出提示 */
  $alert({ text: "复制成功", type: "success" })
  /** 删除动态创建的textarea元素（复制之后再删除元素，否则无法成功赋值） */
  textareaEle.remove()
}

方法二： navigator.clipboard.writeText()方法

Clipboard API 中的 navigator.clipboard.writeText()方法可以更加简单的实现单行和多行的内容复制，而且该方法会返回一个Promise对象

 <ElInput type="textarea" autosize style={{ width: "100%" }} placeholder="输入内容" v-model={data3.value} />
 <br />
 <ElButton plain type="primary" onClick={() => handleCopy3(data3.value)}>点击复制</ElButton>

/**
* @param data 需要复制的内容
*/
const handleCopy3 = (data: string) => {
   navigator.clipboard.writeText(data).then(() => {
       $alert({ text: "复制成功", type: "success" })
   }).catch(error => {
       console.log("error => ", error)
       $alert({ text: `复制失败-${error.message}`, type: "error" })
   })
}

writeText()方法源码

interface Clipboard extends EventTarget {
    writeText(data: string): Promise<void>;
}