vue3生成二维码，在dialog中显示

最新推荐文章于 2024-05-31 13:22:59 发布

qq_44892611

最新推荐文章于 2024-05-31 13:22:59 发布

阅读量120

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_44892611/article/details/134188668

版权

用npm安装

npm install qrcode --save-dev

引用

import QRCode from "qrcode";

在vue中编写

在dialog中增加@open="openOrder"方法

methods: {

getQRCode() {
                //生成的二维码为URL地址js
                this.qrUrl = this.creForm;
                let opts = {
                    errorCorrectionLevel: "H", //容错级别
                    type: "image/png", //生成的二维码类型
                    quality: 0.3, //二维码质量
                    margin: 0, //二维码留白边距
                    width: 150, //宽
                    height: 150, //高
                    text: this.creForm.orderId, //二维码内容
                    color: {
                        dark: "#333333", //前景色
                        light: "#fff", //背景色
                    },
                };
                            
                let msg = document.getElementById("QRCode_header");
                // 将获取到的数据（val）画到msg（canvas）上
                QRCode.toCanvas(msg, this.qrUrl, opts, function(error) {
                    if (error) {
                        console.log("二维码加载失败", error);
                        this.$message.error("二维码加载失败");
                    }
                });
            },
openOrder() {
                this.$nextTick(() => {
                    this.getQRCode();
                })
            },
      },

然后正常打开dialog就可以啦