vuejs 구성 요소에서 버튼을 클릭하여 URL을 클립보드에 복사

vuejs 구성 요소에서 버튼을 클릭하여 URL을 클립보드에 복사

다음 컴포넌트를 가지고 있는데, 이 컴포넌트를 복사하는 버튼을 원합니다.link_url클릭해서 클립보드로 이동합니다.

아이디 선택 시 동작하는 Javascript 코드를 가지고 있지만 링크에는 아이디가 없습니다.다음 중 하나를 선택할 수 있습니까?a-tag컴포넌트 자체의 참조 또는 이 작업을 수행하는 최선의 방법을 참조하십시오.

또한 이 .link_url을 사용하여 a-tag를 생성할 생각도 했습니다.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>

vuej를 사용해야 하는 경우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);   
        }
    }
}

Javascript에서 클립보드와 함께 Navigator 객체를 사용할 수 있습니다.

메모: navigator.clipboard.writeText는 비동기입니다.

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

대부분의 최신 웹 탐색기(2021)에서는 navigator.clipboard를 사용할 수 있습니다.writeText("yourText");

이것도 할 수 있는 경우에 대비해서:

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

  clipboardData.writeText(message);

나한테는 안 먹히는데, 이거 먹어봐.

<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,으로 연락주세요.

이 기능을 사용해 보세요.

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);          
          }

언급URL : https://stackoverflow.com/questions/58733960/copy-url-to-clipboard-via-button-click-in-a-vuejs-component