Vuetify의 v-text-field에서 클립보드로 텍스트를 복사하려면 어떻게 해야 합니까?

Vuetify의 v-text-field에서 클립보드로 텍스트를 복사하려면 어떻게 해야 합니까?

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>

문제는 어떤 코드를 넣느냐이다.copyTextVue 인스턴스의 메서드?

이 솔루션은 나에게 효과가 있었다.새로운 클립보드 API 쓰기를 사용합니다.대부분의 최신 브라우저에서 지원되는 텍스트 방식입니다(자세한 내용은 사용 가능 참조).클립보드에 쓰는 데 특별한 권한이 필요하지 않습니다.

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

값을 할당하면 이 작업을 수행할 수 있습니다.refAtribute를 지정한 후 메서드에서는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>

나는 vue-clipboards로 해결했다.

1. - npm vue-childboard 설치

2.- 이것을 메인에 추가합니다.

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.- 코드를 실행합니다.그게 다야.

에 ID를 할당하다v-text-field다음과 같은 요소:

   <v-text-field v-model="text1" id="tocopy" ></v-text-field>

메서드에 다음 코드를 추가합니다.

copyText(){
    let input=document.getElementById("tocopy");
   input.select();
         document.execCommand("copy");
    }

이것을 확인하다

여기에는 어떤 종류의 서드파티 라이브러리도 필요하지 않습니다.클릭 메서드를 사용하여 동적 문자열을 전달하기만 하면 됩니다.

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

메서드는 클립보드에 직접 복사합니다.

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

언급URL : https://stackoverflow.com/questions/57713402/how-can-i-copy-text-from-vuetifys-v-text-field-to-clipboard