[JavaScript知识库]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();
  }
}