vue의 js는 텍스트를 클립보드에 복사하기 위해 클릭을 구현합니다. 세 가지 솔루션

vue의 js는 텍스트를 클립보드에 복사하기 위해 클릭을 구현합니다. 세 가지 솔루션

인터넷에서 지저분하고 적용할 수 없는 것을 발견했기 때문에 기록을 작성하고
vue에서 js와 ​​공유하여 클릭하여 클립보드에 텍스트를 복사했습니다. 세 가지 해결책

효과:

해결 방법 1: 기본 API(클립보드) 사용

먼저 클립보드에 텍스트를 복사/붙여넣기 위한 경량 JavaScript 라이브러리인 클립보드 라이브러리를 설치해야 합니다.

설치하려면 명령줄에서 npm installclipboard --save를 실행하세요.

 npm install clipboard --save

이 라이브러리를 사용한 구현 코드는 다음과 같습니다.

<template>
  <div>
    <button @click="copyText">复制文本</button>
  </div>
</template>

<script>
import clipboard from 'clipboard';

export default {
    
    
  methods: {
    
    
    copyText() {
    
    
      let text = 'Hello World';
      clipboard.writeText(text);
      alert('已复制到剪贴板！');
    }
  }
}
</script>

해결 방법 2: v-copy 명령 사용

vue 지시문을 사용하여 요소가 클립보드에 텍스트 복사를 지원하도록 할 수 있습니다.

<template>
  <div>
    <button v-copy="text">复制文本</button>
  </div>
</template>

<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      text: 'Hello World'
    }
  }
}
</script>

// 注册指令
Vue.directive('copy', {
    
    
  bind: function(el, binding) {
    
    
    el.$copy = function() {
    
    
      const textarea = document.createElement('textarea');
      textarea.value = binding.value;
      document.body.appendChild(textarea);
      textarea.select();
      document.execCommand('Copy');
      document.body.removeChild(textarea);
    }
    el.addEventListener('click', el.$copy);
  },
  unbind: function(el) {
    
    
    el.removeEventListener('click', el.$copy);
  }
});

해결 방법 3: clipsboard.js 라이브러리 사용

Clipboard.js 라이브러리는 텍스트를 클립보드에 복사하는 기능을 구현하기 위해 설치하고 사용할 수 있는 기성 플러그인입니다.

설치하려면 명령줄에서 npm installclipboard --save를 실행하세요.

npm install clipboard --save 

Clipboard.js를 사용하여 다음과 같이 코드를 구현합니다.

<template>
  <div>
    <button class="copy-btn" data-clipboard-text="Hello World">复制文本</button>
  </div>
</template>

<script>
import ClipboardJS from 'clipboard';

export default {
    
    
  mounted() {
    
    
    new ClipboardJS('.copy-btn');
  }
}
</script>

해결 방법 3: Clipboard.js 라이브러리 사용(vue3 버전)

Clipboard.js 라이브러리 설치
npm 또는 Yarn을 사용하여 Clipboard.js를 설치할 수 있으며 명령은 다음과 같습니다.

npm i clipboard
# 或者
yarn add clipboard

전체 코드는 다음과 같습니다.

<template>
  <button class="copy-btn">复制</button>
</template>

<script setup>
import {
    
     onMounted, ref } from 'vue'
import ClipboardJS from 'clipboard'

const clipboardText = ref('hello world')
const copyText = () => {
    
    
  const clipboard = new ClipboardJS('.copy-btn', {
    
    
    text() {
    
    
      return clipboardText.value
    }
  })
  clipboard.on('success', () => {
    
    
    console.log('复制成功')
  })
  clipboard.on('error', () => {
    
    
    console.log('复制失败')
  })
}

onMounted(() => {
    
    
  copyText()
})
</script>

위의 세 가지 구성표는 모두 텍스트를 클립보드에 복사하는 기능을 실현할 수 있으며 특정 응용 프로그램에서는 실제 상황에 따라 적합한 구성표를 선택할 수 있습니다.