将子组件的 textarea 目标复制到剪贴板 [英] Target the textarea of a child component to copy to clipboard

问题描述

我有一个针对 textarea 并将内容复制到剪贴板的工作功能.当直接定位 textarea 时，它非常有效.

我需要针对子组件中的 textarea 的相同功能.我不知道如何定位每个组件中的特定区域.

工作示例:

<div class="media-label col-md-12">产品标题:</div><文本区域class="col-md-6 col-md-offset-3"v-model="productTitle"id="产品标题"></textarea><按钮类型=按钮"class="btn btn-info"数据复制目标=#productTitle"v-on:click="copyTextArea">将标题复制到剪贴板

复制功能:

 copyTextArea(e) {var targetElement = e.target;var copyTarget = targetElement.dataset.copytarget;var element = document.querySelector(copiedTarget);元素选择()；document.execCommand('copy');},

我遇到的组件设置问题:

<示例组件标题="说明"输入类型=文本区域"v-model="productTitle"id="产品标题"></示例组件><按钮类型=按钮"class="btn btn-info"copytarget="#productTitle"v-on:click="copyTextArea">将标题复制到剪贴板

解决方案

使用 ref 放在 textarea 上，然后直接在 copyTextArea 方法中引用该元素:

new Vue({el: '#app',方法: {复制文本区域(){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="应用程序"><div>产品名称:</div><textarea ref="text"></textarea><button @click="copyTextArea">将标题复制到剪贴板

I have a working function which targets a textarea and copies the content to a clipboard. It works great when targeting a textarea directly.

I need the same functionality targeting the textarea within a child component(s). I can't figure out how to target that specific area within each component.

Working example:

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

The copy function:

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

Component setup I'm having issues with:

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

解决方案

Use a ref on the textarea and then reference the element directly in the copyTextArea method:

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>

这篇关于将子组件的 textarea 目标复制到剪贴板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！