EG:
第一种实现 :
// import { Message, Notice } from 'view-ui-plus';
/**
* 复制到剪切板
*
* @param {string} content - 内容
* @param {string} type - 类型
*/
const copyShearPlate = (content, type) => {
let title = {
get: '获取token',
update: '更新token'
}[type]
// 复制文本到剪贴板
navigator.clipboard.writeText(content)
.then(function () {
// PS: 这个使用的是 view-ui-plus 组件库实现的弹窗提示
Notice.success({ title, render: h => h('span', ['已经成功复制到剪切板']) });
})
.catch(function (error) {
Notice.error({ title, render: h => h('span', ['复制到剪切板失败']) })
});
}
export { copyShearPlate }
第二种实现 :
PS: 比较接地气的写法
/**
* 复制到剪切板
*
* @param {string} content - 内容
* @param {string} type - 类型
*/
const copyShearPlate = (content, type) => {
let title = {
get: '获取token',
update: '更新token'
}[type]
try {
const input = document.createElement('input');
input.value = content;
document.body.appendChild(input);
input.select();
document.execCommand('copy');
document.body.removeChild(input);
Notice.success({ title, render: h => h('span', ['已经成功复制到剪切板']) })
} catch (error) {
Notice.success({ title, render: h => h('span', ['复制到剪切板失败']) })
}
}
第三种实现 :
function copyShearPlate(text) {
const temp = document.createElement('textarea');
temp.value = text;
document.body.appendChild(temp);
temp.select(); // 选择对象
document.execCommand('Copy'); // 执行浏览器复制命令
document.body.removeChild(temp);
}
使用:
import { copyShearPlate } from "@utils";
copyShearPlate ("测试数据", "get")