核心代码
/*复制图片*/
copyImg(dom) {
/* 警告:dom不能是img标签,建议用DIV标签包裹img标签,否者会报错!不支持复制背景图! */
dom.style.userSelect = 'auto';
let selection = getSelection(), range = document.createRange();
selection.removeAllRanges(), range.selectNodeContents(dom), selection.addRange
(range), document.execCommand('copy'), selection.removeAllRanges();
},
用例
<template>
<div>
<div ref="img">
<img
src="https://gips2.baidu.com/it/u=1070828945,3304149431&fm=3028&app=3028&f=PNG&fmt=auto&q=75&size=f150_150">
</div>
<el-input v-model.trim="inputValue" placeholder="请输入内容" clearable />
<el-button type="primary" @click="copyImg($refs.img)">复制图片</el-button>
</div>
</template>
<script>
export default {
data() { return { inputValue: '', } },
methods: {
/*复制图片*/
copyImg(dom) {
/* 警告:dom不能是img标签,建议用DIV标签包裹img标签,否者会报错!不支持复制背景图! */
dom.style.userSelect = 'auto';
let selection = getSelection(), range = document.createRange();
selection.removeAllRanges(), range.selectNodeContents(dom), selection.addRange(range), document.execCommand('copy'), selection.removeAllRanges();
},
}
};
</script>
扩展用法(自定义复制成功提示文本+弹窗方式)
/*复制图片*/
copyImg(dom, isAlert, successMsg = '') {
/* 警告:dom不能是img标签,建议用DIV标签包裹img标签,否者会报错!不支持复制背景图! */
dom.style.userSelect = 'auto';
let selection = getSelection(), range = document.createRange();
selection.removeAllRanges(), range.selectNodeContents(dom), selection.addRange
(range), document.execCommand('copy'), selection.removeAllRanges();
if (isAlert) {
if (typeof isAlert === "function") {
isAlert(successMsg || "图片复制成功");
} else {
Message.success(successMsg || "图片复制成功");
}
}
},