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