javascript - Vue 将文本从动态创建的组件复制到剪贴板

Question

在 Vue 中，我有一个按钮，可以从数组中生成具有不同信息的组件。生成并显示信息后，我需要实现一个功能，在单击特定项目时复制此信息。到目前为止，我能够为每个元素输出内部 html 文本，但是当用户单击它时，我很难将这些信息复制到剪贴板，因为这些元素是动态生成的。我已经在我的方法中尝试过这个：target.select(); document.execCommand("Copy"); 这是我到目前为止所拥有的：

在这里，我使用循环遍历存储了所有 html 元素的数组。

<p class='margin-top-10 margin-bottom-15' v-for='(captionItem, key) in captionInfoData' :key='key' v-html="captionItem" @click="copyCaptionData"></p>

这是迭代产生的标题项之一：

<div class="caption-info">
   <p class="wrapper name-wrapper">
      <span class="caption-label margin-right-10">Name:</span>
      <span class="caption-data name">Sofa</span>
  </p>
</div>

这是我迄今为止输出点击元素的内部 html 的函数：

copyCaptionData(e) {
   if(e.target.matches('.caption-data')) {
      let target = $(e.target);
      console.log(target.text());
   }
}

如何将目标文本复制到剪贴板？

标签： javascriptvue.js