通过单击 vuejs 组件中的按钮将 url 复制到剪贴板

Question

我有以下组件，我想要一个按钮，在点击时将 link_url 复制到剪贴板。

我有 javascript 代码可以在选择 id 时使用，但是链接没有 id。我可以通过组件本身的 refs 完成对 a-tag 的选择吗，或者完成这项工作的最佳方法是什么。

我也在考虑用 copyURL() 中的 this.link_url 动态生成一个标签，但我想那会很脏。我正在寻找 vuejs 的方式。

 <template>
  <li class="list-group-item">
    <a :href="link_url"
         class="text-dark"
         target="_blank"
         rel="noopener noreferrer">{{ link_name }}</a>
    <button @click="copyUrl">copy url from a tag</button>
  </li>
</template>

<script>
export default {
  props: ["link_url", "link_name"],
  methods: {
    copyURL() {
      var Url = document.getElementById('myid'); /*GET vuejs el reference here (via $ref) but how?*/
      Url.innerHTML = window.location.href;
      console.log(Url.innerHTML)
      Url.select();
      document.execCommand("copy");
    }
  }
}
</script>

<style>
</style>

原文由 mahatmanich 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果您需要使用 vuejs ref 将其添加为属性

<a :href="link_url" class="text-dark" target="_blank" rel="noopener noreferrer" ref="mylink">
    {{ link_name }}
</a>

并以下列方式在您的方法中使用它：

   methods: {
    copyURL() {
      var Url = this.$refs.mylink;
      Url.innerHTML = window.location.href;
      console.log(Url.innerHTML)
      Url.select();
      document.execCommand("copy");
    }
  }

但是，您应该查看此 链接 以获得更好的跨浏览解决方案。在这种情况下，您不需要 ref 属性。

这是适合您的情况的链接中的解决方案：

 methods: {
    copyUrl() {
        const el = document.createElement('textarea');
        el.value = this.link_url;
        el.setAttribute('readonly', '');
        el.style.position = 'absolute';
        el.style.left = '-9999px';
        document.body.appendChild(el);
        const selected =  document.getSelection().rangeCount > 0  ? document.getSelection().getRangeAt(0) : false;
        el.select();
        document.execCommand('copy');
        document.body.removeChild(el);
        if (selected) {
          document.getSelection().removeAllRanges();
          document.getSelection().addRange(selected);
        }
    }
}

原文由 Fab 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以在 javascript 中将导航器对象与剪贴板一起使用。

注意：navigator.clipboard.writeText 是异步的。

 methods: {
  async copyURL(mytext) {
    try {
      await navigator.clipboard.writeText(mytext);
      alert('Copied');
    } catch($e) {
      alert('Cannot copy');
    }
  }
}

原文由 Jundell 发布，翻译遵循 CC BY-SA 4.0 许可协议