vue实现复制图片

1.引入clipboard

npm i clipboard --save

2.使用

<template>
    <div>
        <div class="btn" id="copyImgBtn" @click="copyImg">复制图片</div>
        <div id="imgBox" class="imgBox">
            <div id="img">
                <img
                    v-drag
                    :src="url"
                />
            </div>
        </div>
    </div>
</template>

<script>
import Clipboard from "clipboard";
export default {
    data() {
        return {
            url: ''
        }
    },
    methods: {
        copyImg() {
            const clipboard = new Clipboard("#copyImgBtn", {
                target: (e) => {
                    let parent = document.querySelector("#img");
                    let width = parent.querySelector("img").width;
                    if (!width) {
                        console.log("图片还未加载，请稍后再试");
                        return;
                    }
                    console.log("parent", parent);
                    return parent;
                },
            });
            clipboard.on("success", (e) => {
                console.log("复制成功", e);
                Message({
                    type: "success",
                    message: "复制成功",
                });
                // 释放内存
                clipboard.destroy();
            });
            clipboard.on("error", (e) => {
                console.log("失败"); //console.log('该浏览器不支持自动复制')
                Message({
                    type: "error",
                    message: "复制失败",
                });
                // 不支持复制
                // 释放内存
                clipboard.destroy();
            });
        },
    },
};
</script>

<style>
</style>