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

Question

我正在使用 Vuetify，并尝试在点击按钮时将 v-text-field 组件中的文本复制到剪贴板。 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方法中应该放置什么代码？

- mlst

Answer 1

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

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

- Coola

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

- Christian Carrillo

---

有没有可能将copyText()方法与$refs或元素的css id解耦？例如，我有一个字符串数组，通过使用v-for动态呈现v-text-field。我想在每个这些v-text-field旁边添加“复制”按钮。然后，当单击按钮时，我希望只将其关联的v-text-field中的文本复制到剪贴板中。 - mlst

另外，我在execCommand之后添加了几行代码来重置输入框中的选择内容：const selection = window.getSelection(); const range = selection.getRangeAt(0); selection.removeRange(range); - Barabas

Answer 3

我使用vue-clipboards解决了这个问题。

1.- 运行npm install vue-clipboards命令安装vue-clipboards。

2.- 在你的main.js文件中添加以下内容。

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

3.- 创建 Vuetify 按钮并添加 v-clipboard，如下所示：

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

4.- 在您的数据部分（您可以在任何方法或任何地方填写您的变量）。

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

5. 运行你的代码，就这样。

- Lrodriguez84

---

可能是复制文本最流畅的方式。与为每个组件再次编写方法相比，我更喜欢这种方式。 - Fabian Wagner - a6a2f5842

Answer 4

这不需要任何第三方库。只需使用“onclick”方法传递动态字符串即可。

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

该方法将直接复制到剪贴板。

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

- Pallav Chanana

Answer 5

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

- Boussadjra Brahim

---

你需要将ref=改为id=。Vuetify显然会将其重新映射到真实的输入元素，但是ref不会被重新映射，我相信有一种方法可以让真正的ref起作用。 - Ray Foss