如何将文本从 Vuetify v-text-field 复制到剪贴板？答案

【问题标题】：How can I copy text from Vuetify's v-text-field to clipboard?如何将文本从 Vuetify v-text-field 复制到剪贴板？
【发布时间】：2022-01-24 16:05:07
【问题描述】：

我正在使用 Vuetify 并尝试在单击按钮时将文本从 v-text-field 组件复制到剪贴板。 Sample code available on codepen:

<template>
    <div id="app">
      <v-app id="inspire">
        <v-container>
          <v-text-field v-model="text1"></v-text-field>
          <v-btn @click="copyText">copy</v-btn>
        </v-container>
      </v-app>
    </div>
</template>

<script>
    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
      data() { 
        return {
          text1: 'lorem ipsum 123'
        }
      },
      methods: {
        copyText (){
          // copy to clipboard
        }
      }
    })
</script>

问题是在Vue实例的copyText方法中放入什么代码？

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component vuetify.js

【解决方案1】：

这个解决方案对我有用。它使用大多数现代浏览器都支持的新Clipboard API writeText method（有关更多详细信息，请参阅Can I use）。写入剪贴板不需要特殊权限。

  methods: {
    copyText() {
      navigator.clipboard.writeText(this.text1);
    }
  }

【讨论】：

【解决方案2】：

您可以通过为ref 属性分配一个值，然后在方法中请求input 元素，使用select 函数选择其内容并使用document.execCommand("copy"); 复制该内容：

<template>
    <div id="app">
      <v-app id="inspire">
        <v-container>
          <v-text-field v-model="text1" ref="textToCopy"></v-text-field>
          <v-btn @click="copyText">copy</v-btn>
        </v-container>
      </v-app>
    </div>
</template>

<script>
    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
      data() { 
        return {
          text1: 'lorem ipsum 123'
        }
      },
      methods: {
        copyText () {
          let textToCopy = this.$refs.textToCopy.$el.querySelector('input')
          textToCopy.select()
          document.execCommand("copy");
        }
      }
    })
</script>

【讨论】：

是否可以将 copyText() 方法与元素的 $refs 或 css id 分离？例如。我有一个字符串数组，使用v-for 动态呈现v-text-field。我想在每个v-text-field 旁边添加“复制”按钮。然后，当单击按钮时，我只想将其关联的 v-text-field 中的文本复制到剪贴板。
另外，我在execCommand 之后添加了一些代码来重置输入中的选择：const selection = window.getSelection(); const range = selection.getRangeAt(0); selection.removeRange(range);

【解决方案3】：

我用 vue-clipboards 解决了。

1.- npm install vue-clipboards

2.- 在你的 main.js 中添加这个

import VueClipboards from 'vue-clipboards'
Vue.use(VueClipboards)

3.- 创建 vuetify btn 并添加 v-clipboard，如下所示

<v-btn v-clipboard="clipboardValue">add to clipboard</v-btn>

4.- 在你的数据部分（你可以用任何方法或你想要的地方填写你的 var）。

data: () => ({
clipboardValue: 'something'
}),

5.- 运行您的代码。全部。

【讨论】：

可能是最流畅的文本复制方式。更喜欢这个而不是为每个组件一次又一次地编写方法。

【解决方案4】：

为v-text-field 元素分配一个id，例如：

   <v-text-field v-model="text1" id="tocopy" ></v-text-field>

并将以下代码添加到您的方法中：

copyText(){
    let input=document.getElementById("tocopy");
   input.select();
         document.execCommand("copy");
    }

检查这个codepen

【讨论】：

您必须将 ref= 更改为 id=。 Vuetify 显然将它重新映射到一个真正的输入元素，ref 没有被重新映射，我确定有一种方法可以让一个真正的 ref 工作。

【解决方案5】：

这不需要任何类型的第三方库只需使用 On click 方法传递动态字符串

<template>
     <v-btn @click="copyToClipBoard(errorMsg)">
       <v-icon>mdi-content-copy</v-icon>
     </v-btn>
</template>

方法会直接复制到剪贴板

  methods: {
    copyToClipBoard(textToCopy) {
      navigator.clipboard.writeText(textToCopy);
    },
  }

【讨论】：