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

Question

我有以下组件，我希望有一个按钮可以在单击时将 link_url 复制到剪贴板。

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

我也在考虑在 copyURL() 中动态生成一个带有 this.link_url 的 a-tag，但我想那会很脏。我正在寻找 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>

Answer 1

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

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

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