剪贴板操作 Clipboard API 教程
https://www.ruanyifeng.com/blog/2021/01/clipboard-api.html
vue2：npm install clipboard --save
https://github.com/zenorocha/clipboard.js
<el-button :data-clipboard-text="copyContent" class="copy" @click="copy('.copy')">复制</el-button>
import Clipboard from 'clipboard'
export const copy = className => {
const clipboard = new Clipboard(className);
clipboard.on('success', () => {
Message({
message: '复制成功',
type: 'success',
});
clipboard.destroy(); // 释放内存
});
clipboard.on('error', () => {
Message({
message: '该浏览器不支持自动复制',
type: 'warning',
});
clipboard.destroy(); // 释放内存
});
};
https://github.com/JamieCurnow/vue-clipboard3
vue3：npm install vue-clipboard3 --save
<template>
<el-button @click="copyLink()">复制链接</el-button>
</template>
<script setup>
import useClipboard from 'vue-clipboard3';
const { toClipboard } = useClipboard();
const copyLink = async () => {
await toClipboard('www.baidu.com')
}
</script>
最后需要注意的是复制的点击按钮尽量用 button 按钮，其他标签不生效。
如果你不想要 button 的样式，只能把 button 的透明度设为 opacity: 0， 然后定位到你的盒子上了
