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

ufj5ltwl  于 2022-12-21  发布在  Java
关注(0)|答案(7)|浏览(148)

我有以下组件,我想有一个按钮,复制link_url到剪贴板上点击。
我有javascript代码,当选择一个id时可以工作,但是链接没有id。我可以通过组件本身的引用完成a-tag的选择吗?或者什么是完成这一选择的最佳方法。
我也在考虑在copyURL()中动态地生成一个带有www.example.com _url的a标签this.link,但我想那会很脏..我正在寻找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>
oogrdqng

oogrdqng1#

你可以在javascript中使用带有剪贴板的导航器对象。
注意:导航器.剪贴板.writeText是异步的。

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

eoxn13cs2#

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

fcipmucu3#

大多数现代网络浏览器(2021)都允许你使用这个:导航器。剪贴板。写入文本(“您的文本”);
以防万一,您也可以执行以下操作:

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

  clipboardData.writeText(message);
mnemlml8

mnemlml84#

对我不起作用,试试这个

<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,谢谢

fxnxkyjh

fxnxkyjh5#

在版本3中

<template>
<input ref="pixCodeInput" type="text">
<button @click="copyPixCodeClick()" type="button">copiar código</button>
</template>

<script setup>
import { ref } from 'vue';

const pixCodeInput = ref(null);

function copyPixCodeClick() {
    navigator.clipboard.writeText(pixCodeInput.value.value);
}
</script>
q8l4jmvw

q8l4jmvw6#

<template>
  <button @click="copyMe('Copied')">Copy Your Code</button>
</template>

<script setup>
import { ref } from 'vue'
function copyMe(){
  navigator.clipboard.writeText("Copy Clipboard");
}
</script>
roejwanj

roejwanj7#

尝试此功能:

async copy(mytext) {
               var input = document.createElement('input');
               input.setAttribute('value', mytext);
               input.value = mytext;        
               document.body.appendChild(input);
               try {
                    input.select();    
                    input.click();     
                    input.focus();
                    var successful = document.execCommand('copy');
                    var msg = successful ? 'successful' : 'unsuccessful';
                    console.log('Testing code was copied ' + successful + ' ' + msg);
                    
               } catch (err) {
                    console.log('Oops, unable to copy');
               }
               document.body.removeChild(input);          
          }

相关问题