前端复制功能
方法一:使用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