Vue 导入qrcodejs2库生成二维码

最新推荐文章于 2025-06-19 10:23:58 发布

原创

最新推荐文章于 2025-06-19 10:23:58 发布 · 2.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue #qrcodejs2

1.下载安装qrcodejs2包

 npm i qrcodejs2

2.导入

import QRCode from "qrcodejs2";

3.html

<div class="qrcode" id="qrcode"></div>  //class是我的样式可以忽略，但是id一定要下

4.使用，以下是我的代码，需求是该页面就会显示二维码，我用的是search方法，然后在create中进行回调函数的使用

     methods: {
        search() {
                var qrcode = new QRCode("qrcode", {
                text: 'www.baidu.com',  //表示内容，可以是地址或者是文字'55566'或者参数
                colorDark : "#000000",  //前景色
                colorLight : "#ffffff",   //背景色
                correctLevel : QRCode.CorrectLevel.H   //容错级别
                } 
             }，
    created(){
        this.$nextTick (function () { 
            this.search();        
        }) 
    },
    mounted() {
    },

说一下：nexttick异步更新，如果不使用的话再create钩子函数中Dom 操作还没被渲染，所以一定要将DOM操作的js代码放进
&