Скопируйте URL в буфер обмена нажатием кнопки в компоненте vuejs - PullRequest
Новая
       12

Скопируйте URL в буфер обмена нажатием кнопки в компоненте vuejs

2 голосов
/ 06 ноября 2019

У меня есть следующий компонент, и я хотел бы иметь кнопку, которая копирует link_url в буфер обмена при нажатии.

У меня есть код JavaScript, который работает при выборе идентификатора, однако ссылки неесть идентификаторМогу ли я выполнить выбор a-тэга с помощью ссылок в самом компоненте, или как лучше всего это сделать.

Я также думал о создании a-тэга с помощью this.link_urlв copyURL () динамически, но я думаю, это было бы очень грязно ... Я ищу способ 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>

1 Ответ

1 голос
/ 06 ноября 2019

Если вам нужно использовать 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);   
        }
    }
}
...