如何将文本从Vutify的v-text字段复制到剪贴板？

How can I copy text from Vuetify#39;s v-text-field to clipboard?(如何将文本从Vutify的v-text字段复制到剪贴板？)

问题描述

单击按钮时，我正在使用注册并尝试将文本从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方法中放入什么代码？

推荐答案

您可以通过为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>

这篇关于如何将文本从Vutify的v-text字段复制到剪贴板？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！