如何將文本從 Vuetify 的 v-text-field 復制到剪貼板？

Question

我正在使用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方法中放入什么代碼？

Answer 1

這個解決方案對我有用。 它使用大多數現代瀏覽器都支持的新剪貼板 API writeText 方法（有關更多詳細信息，請參閱Can I use ）。 寫入剪貼板不需要特殊權限。

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

Answer 2

您可以通過為ref屬性分配一個值，然后在方法中請求input元素，使用select函數選擇其內容並使用document.execCommand("copy");復制該內容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>

Answer 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.- 在你的數據部分（你可以用任何方法或你想要的地方填寫你的變量）。

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

5.- 運行您的代碼。 它的全部。

Answer 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

Answer 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);
    },
  }