如何将文本从 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 方法中放入什么代码？

原文由 mlst 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以通过为 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 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

原文由 Coola 发布，翻译遵循 CC BY-SA 4.0 许可协议