vue3 二维码组件

功能介绍:

        包含生成二维码，复制二维码链接到粘贴板，复制二维码图片到粘贴板。

效果图：

 

使用前提:

        1、安装 qrcodejs2@0.0.2

        2、对应的ui框架 我这里用的是 element-plus

代码：

        

<template>
    <div class="to-board-wrap">
        <el-popover placement="right" width="208px" trigger="hover">
            <template #reference>
                <slot></slot>
            </template>
            <div class="qr-code-wrap">
                <!-- 确保id要唯一  要不会存在问题 -->
                <div class="qr-code" :id="`qrcode-${id}`"></div>
                <p class="desc-text">请使用微信或其他APP</p>
                <p class="desc-text">扫码查看商品</p>
                <div class="btns">
                    <rc-button size="small" @click="copyQRCode">保存二维码</rc-button>
                    <rc-button size="small" @click="copyUrl">复制链接</rc-button>
                </div>
            </div>
        </el-popover>
    </div>
</template>

<!-- 将图片粘贴到粘贴板 -->
<script setup>
    import QRCode from 'qrcodejs2'
    import { onMounted, toRefs } from 'vue'
    import { ElMessage } from 'element-plus'
    const props = defineProps({
        id: {
            type: [String, Number],
            default: '0001',
        },
        url: {
            type: String,
            default: '',
        },
    })
    const { id, url } = toRefs(props)

    // 获取生成的二维码图片的DataURL
    const copyQRCode = () => {
        const canvas = document.querySelector(`#qrcode-${id.value} canvas`)
        if (canvas) {
            canvas.toBlob(blob => {
                const item = new ClipboardItem({ 'image/png': blob })
                navigator.clipboard
                    .write([item])
                    .then(() => {
                        ElMessage.success('二维码已复制到粘贴板')
                    })
                    .catch(() => {
                        ElMessage.error('复制失败')
                    })
            })
        }
    }

    const copyUrl = () => {
        navigator.clipboard
            .writeText(url.value)
            .then(() => {
                ElMessage.success('二维码链接已复制到粘贴板')
            })
            .catch(() => {
                ElMessage.error('复制失败')
            })
    }

    onMounted(() => {
        const qrcode = new QRCode(`qrcode-${id.value}`, {
            width: 164,
            height: 164,
        })
        const text = url.value // 二维码内容
        qrcode.makeCode(text)
    })
</script>

<style scoped lang="scss">
    .qr-code-wrap {
        text-align: center;
        .qr-code {
            width: 164px;
            height: 164px;
            margin-bottom: 4px;
        }
        p {
            font-size: 14px;
            line-height: 22px;
            color: #262626;
        }
        .btns {
            margin-top: 8px;
            display: flex;
            justify-content: space-between;
        }
    }
</style>

使用：

<template>
    <!-- 注意:
                1、这里面的id是要唯一的
                2、url是一个html文件，因为最终手机扫码打开的是一个页面 -->
    <ToPasteboard :id="scope.row.spuId" url="aaa.html">
        <div class="right">去分享</div>
    </ToPasteboard>
</template>

<script setup>
import ToPasteboard from '@/components/ToPasteboard/index.vue'
</script>