vue实现文本复制

PC端

import { message } from 'ant-design-vue';
export const clipBoard = (value: string) => {
const textarea: HTMLTextAreaElement = document.createElement('textarea');
textarea.setAttribute('readonly', 'readonly');
textarea.value = value;
document.body.appendChild(textarea);
textarea.setSelectionRange(0, textarea.value.length);
textarea.select();
document.execCommand('copy');
if (document.body.removeChild(textarea)) {
message.success('复制成功');
} else {
message.error('复制失败');
}
};


移动端

/**
* 复制文本
* @param text
*/
export function copyText(text: string) {
let input = document.querySelector<HTMLInputElement>('#copy-input');
if (!input) {
input = document.createElement('input');
input.id = "copy-input";
input.readOnly = true; // 防止ios聚焦触发键盘事件
input.style.position = "fixed";
input.style.left = "-1000px";
input.style.zIndex = "-1000";
document.body.appendChild(input);
}
input.value = text;
// ios必须先选中文字且不支持 input.select();
selectText(input, 0, text.length);
if (document.execCommand('copy')) {
document.execCommand('copy');
Toast('已复制到粘贴板');
} else {
console.log('不兼容');
}
input.blur();
// input自带的select()方法在ios端无法进行选择，所以需要自己去写一个类似的方法
// 选择文本。createTextRange(setSelectionRange)是input方法
}
/**
* @param textbox
* @param startIndex
* @param stopIndex
*/
export function selectText(textbox: any, startIndex: any, stopIndex: any) {
if (textbox.createTextRange) {
const range = textbox.createTextRange();
range.collapse(true);
range.moveStart('character', startIndex); // 起始光标
range.moveEnd('character', stopIndex - startIndex); // 结束光标
range.select(); // 不兼容ios
} else { // firefox/chrome
textbox.setSelectionRange(startIndex, stopIndex);
textbox.focus();
}
}