Vue2实现点击按钮复制旁边的文字

效果图:

点击复制，复制单号

 代码：

 <div class="card-detail"> <div>保单号:</div> <div class="card-code">PUYHXXXXXXX</div>
 <div @click="handleCopy(1)">| 复制</div> </div> 
 

//复制单号 更新版本
// iOS 才用现代的方法复制，因为微信小程序安卓 webview 上用这个方法会报错，所以添加了else

  handleCopy(text) {
      const isSafari = navigator.userAgent.match(/iPad|iPhone|iPod|Macintosh/i);
      return new Promise((resolve) => {
        // iOS 才用现代的方法复制，因为微信小程序安卓 webview 上用这个方法会报错
        if (navigator.clipboard && isSafari) {
          navigator.clipboard
            .writeText(text)
            .then(() => {
              this.$message.success("复制成功");
            })
            .catch(() => {
              resolve(false);
            });
        } else {
          import("copy-to-clipboard").then(({ default: copy }) => {
            resolve(
              copy(text, {
                format: "text/plain",
                message: "请点击确定按钮复制链接",
              })
            );
            this.$message.success("复制成功");
          });
        }
      });
    },