Question

我正在使用 Vuetify ，并试图在单击按钮时将文本从{~}组件复制到剪贴板。 Sample code available on codepen：

v-text-field

问题是要在Vue实例的<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>方法中放入什么代码？

Answer 1

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

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

Answer 2

您可以通过为ref属性分配一个值，然后在方法中请求input元素，使用select函数选择其内容并使用{{1 }}：

document.execCommand("copy");

Answer 3

为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

Answer 4

我用Vue剪贴板解决了。

1.- npm安装vue剪贴板

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.-运行您的代码。全部。

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

4 个答案: