使用Clipboard复制文本（Vue）

• 使用Clipboard复制的文本有两类情况：复制的文本分为无格式文本和带格式文本；
• 复制方式有两类情况：通过属性复制和通过节点复制

1、复制无格式文本

1. 通过属性复制：
   1）先将文本和复制按钮通过id关联；
   2）点击按钮时，调用Clipboard()实例复制文本；
2. 通过target指定要复印的节点。

<a-form-model-item
  label="会议密码"
  v-if="scheduleMeetingForm.password.trim().length != 0"
>
  <span id="password">{{ scheduleMeetingForm.password }}</span>
  <a-button
    type="link"
    data-clipboard-target="#password"
    data-clipboard-action="copy"
    @click="copy"
    class="copy-btn"
  >
    <a-icon type="copy" />
  </a-button>
</a-form-model-item>

// 法1：通过属性绑定
let copyBtn = new Clipboard(".copy-btn");
// 法2：通过target指定要复印的节点
/* let copyBtn = new Clipboard(".copy-btn", {
  target: function () {
    return document.getElementById('password');
  }
}); */
copyBtn.on("success", () => {
  this.$message.success(this.$t("message.copy_success"));
  copyBtn.destroy();
});
copyBtn.on("error", () => {
  this.$message.error(this.$t("message.copy_error"));
  copyBtn.destroy();
});

2、复制带格式文本

带格式文本相对无格式文本比较复杂，两种情况如下：

<!-- 邀请信息 -->
<div style="display: none" id="invitationInfo">
<!-- 法1：通过 属性data-clipboard-text绑定invitationInfo变量  -->
<pre>

{{$store.state.account.nickName == null ? "主持人" : $store.state.account.nickName}} 邀请您参加预先安排的会议

主题：{{ scheduleMeetingForm.meetingTitle }}
会议时间：{{ invitation_time }}

加入eMeet会议
{{ invitation_link }}

会议号：{{ scheduleMeetingForm.meetingId }}
密码：{{ scheduleMeetingForm.password }}

</pre>
</div>

copyInvitationInfo () {
  // 法1：通过属性，这种方式div中的文本不能使用HTML元素，要用pre标签保留源格式
  this.invitationInfo = document.getElementById('invitationInfo').innerText
  let copyBtn = new Clipboard(".copyInvitationInfo-btn")
  // 法2：通过target指定要复印的节点，这种方式不能将放置文本的div元素隐藏
  /* let copyBtn = new Clipboard(".copyInvitationInfo-btn", {
    target: function () {
      return document.getElementById('invitationInfo');
    }
  }); */
  copyBtn.on("success", () => {
    this.$message.success(this.$t("message.copy_success"));
    copyBtn.destroy();
  });
  copyBtn.on("error", () => {
    this.$message.error(this.$t("message.copy_error"));
    copyBtn.destroy();
  });
},

要注意的是：
1、上述要复制的文本都是提前准备好的，即“同步复制”，如果在new Clipboard()实例之前，文本没有准备好，则无法成功复制（并没有调用success回调，却也没有调用error回调）；
2、如果要复制的文本需要隐藏，就只能用方式一，而要复制的文本如果不仅包括空格和换行，还需要其他的HTML格式，就只能使用方式二