通过在Vue.js组件中单击按钮将URL复制到剪贴板

2024-05-05 • 问答

我具有以下组件，并且我希望有一个按钮，单击该按钮即可将link_url复制到剪贴板。

我具有选择ID时可以使用的javascript代码，但是链接没有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>

对我不起作用，试试这个 -

<input type="hidden" id="testing-code" :value="testingCode">

copyTestingCode () {
      let testingCodeToCopy = document.querySelector('#testing-code')
      testingCodeToCopy.setAttribute('type','text') 
      testingCodeToCopy.select()

      try {
        var successful = document.execCommand('copy');
        var msg = successful ? 'successful' : 'unsuccessful';
        alert('Testing code was copied ' + msg);
      } catch (err) {
        alert('Oops,unable to copy');
      }

      /* unselect the range */
      testingCodeToCopy.setAttribute('type','hidden')
      window.getSelection().removeAllRanges()
    },

https://codepen.io/PJCHENder/pen/jamJpj?editors=1010，请

大多数现代网络浏览器 (2021) 都允许您使用它： navigator.clipboard.writeText("yourText");

以防万一您也可以这样做：

  const clipboardData =
    event.clipboardData ||
    window.clipboardData ||
    event.originalEvent?.clipboardData ||
    navigator.clipboard;

  clipboardData.writeText(message);

如果您需要使用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");
    }
  }

但是，您应该查看此link以获得更好的跨浏览解决方案。在这种情况下，您不需要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);   
        }
    }
}

通过在Vue.js组件中单击按钮将URL复制到剪贴板

xmcl0712 回答：通过在Vue.js组件中单击按钮将URL复制到剪贴板

大家都在问