前端复制功能

方法一:使用document.execCommand(),这个是最近才学到的一个方法,感觉比其他方法更加便捷( 但是mdn建议不要使用 )。

export function copyStr(value) {
  if (!value) return;
  var tag = document.createElement('textarea');
  tag.value = value;
  document.body.appendChild(tag);
  tag.select();
  document.execCommand('copy');
  tag.remove();
  return value;
}

方法二:使用clipboard插件

<el-button
  link
  type="primary"
  size="small"
  id="textCopy"
  :data-clipboard-text="待复制的文本内容"
  @click="onCopy($('#textCopy'))">复制
</el-button>

import Clipboard from 'clipboard';

const onCopy = (selector) => {
  const clipboard = new Clipboard(selector);
  clipboard.on('success', e => {
    clipboard.destroy();
    ElMessage.success('复制成功');
  });
  clipboard.on('error', e => {
    ElMessage.info('该浏览器不支持自动复制');
    clipboard.destroy();
  });
};

参考链接:
https://www.cnblogs.com/xhyu/p/5370111.html
https://www.npmjs.com/package/clipboard
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand

posted @ 2022-09-15 15:05  近距离  阅读(460)  评论(0编辑  收藏  举报