js in vue implements clicking to copy text to the clipboard-three solutions
Because I found something messy and inapplicable on the Internet, I wrote a record and shared it with
js in vue to click to copy text to the clipboard-three solutions
Effect:
Solution 1: Use native API (clipboard)
First, we need to install the clipboard library, which is a lightweight JavaScript library for copying/pasting text to the clipboard.
Run npm install clipboard --save on the command line to install.
npm install clipboard --save
The implementation code using this library is as follows:
<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>
Solution 2: Use the v-copy command
We can use the vue directive to make the element support copying text to the clipboard.
<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);
}
});
Solution 3: Use the clipboard.js library
The clipboard.js library is a ready-made plug-in that can be installed and used to realize the function of copying text to the clipboard.
Run npm install clipboard --save on the command line to install.
npm install clipboard --save
Use clipboard.js to implement the code as follows:
<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>
Solution 3: Use clipboard.js library (vue3 version)
Install the clipboard.js library
You can use npm or yarn to install clipboard.js, the command is as follows:
npm i clipboard
# 或者
yarn add clipboard
The complete code is as follows:
<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>
The above three schemes can all realize the function of copying text to the clipboard. In specific applications, you can choose the scheme that suits you according to the actual situation.