클립보드에 복사할 자식 구성 요소의 텍스트 영역 대상 지정

클립보드에 복사할 자식 구성 요소의 텍스트 영역 대상 지정

나는 텍스트 영역을 대상으로 하고 내용을 클립보드에 복사하는 작업 기능이 있다.그것은 텍스트 영역을 직접 대상으로 할 때 매우 효과적이다.

나는 어린이 구성 요소 내의 텍스트 영역을 대상으로 하는 동일한 기능이 필요하다.각 구성 요소 내에서 그 특정 영역을 어떻게 공략해야 할지 알 수 없다.

작업 예제:

<div class="media-label col-md-12">Product Title:</div>

<textarea 
  class="col-md-6 col-md-offset-3" 
  v-model="productTitle" 
  id="productTitle"
></textarea>

<button 
  type="button" 
  class="btn btn-info"
  data-copytarget="#productTitle" 
  v-on:click="copyTextArea"
>
  Copy Title To Clipboard
</button>

복사 함수:

 copyTextArea(e) {
   var targetElement = e.target;
   var copiedTarget = targetElement.dataset.copytarget;
   var element = document.querySelector(copiedTarget);
   element.select();
   document.execCommand('copy');
 },

구성 요소 설정 문제 발생:

<ExampleComponent
  title="Title" 
  input-type="textarea"
  v-model="productTitle" 
  id="productTitle" 
></ExampleComponent>

<button 
  type="button" 
  class="btn btn-info"
  copytarget="#productTitle" 
  v-on:click="copyTextArea"
>
  Copy Title To Clipboard
</button>

<ExampleComponent
  title="Description" 
  input-type="textarea"
  v-model="productTitle" 
  id="productTitle"
></ExampleComponent>

<button 
  type="button" 
  class="btn btn-info"
  copytarget="#productTitle" 
  v-on:click="copyTextArea"
>
  Copy Title To Clipboard
</button>

텍스트 영역에서 a를 사용한 다음 에서 직접 요소 참조copyTextArea방법:

new Vue({
  el: '#app',
  methods: {
    copyTextArea() {
      this.$refs.text.select();
      document.execCommand('copy');
    }
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app">
  <div>Product Title:</div>
  <textarea ref="text"></textarea>
  <button @click="copyTextArea">
    Copy Title To Clipboard
  </button>
</div>

참조URL: https://stackoverflow.com/questions/45041383/target-the-textarea-of-a-child-component-to-copy-to-clipboard