Vue生成二维码组件封装

1、使用方法

1.1、载入 JavaScript 文件

<script src="qrcode.js"></script>

1.2、调用

// 简单方式
new QRCode(document.getElementById('qrcode'), 'your content');

// 设置参数方式
var qrcode = new QRCode('qrcode', {
  text: 'your content',
  width: 256,
  height: 256,
  colorDark : '#000000',
  colorLight : '#ffffff',
  correctLevel : QRCode.CorrectLevel.H
});

// 使用 API
qrcode.clear();
qrcode.makeCode('new content');

1.3、参数说明

1.3.1、new QRCode(element, option)

名称	默认值	说明
element	-	显示二维码的元素或该元素的 ID
option		参数配置

option 参数说明
名称	默认值	说明
width	256	图像宽度
height	256	图像高度
typeNumber	4
colorDark	"#000000"	前景色
colorLight	"#ffffff"	背景色
correctLevel	QRCode.CorrectLevel.L	容错级别，可设置为： QRCode.CorrectLevel.L QRCode.CorrectLevel.M QRCode.CorrectLevel.Q QRCode.CorrectLevel.H

API接口
名称	说明
makeCode(text)	设置二维码内容
clear()	清除二维码。（仅在不支持 Canvas 的浏览器下有效）

2、安装qrcodejs2

npm install qrcodejs2 –save
// 或
yarn add qrcodejs2

3、初步封装组件

<!--
 * @Descripttion: 
 * @version: 
 * @Author: AowCt <awoct10@163.com>
 * @Date: 2021-05-12 14:03:44
 * @LastEditors: AowCt <awoct10@163.com>
 * @LastEditTime: 2021-07-13 11:20:45
-->
<template>
    <div class="wechat staff-doctor ui-top-main-bj">
        <div class="QRcode">
           <svg-icon icon-class="icon-QRcode" @click="clickQRcode"/>
           <div>查看二维码</div>
        </div>
        <div class="qrcode" ref="qrcode"></div>
        <van-popup 
            v-model="showQRcode" 
            class="qrcode_box"
            closeable 
            close-on-click-overlay>
            <img class="qrcode_img" :src="qrcodeHref" alt="" srcset="">
            <div>医生专属二维码</div>
        </van-popup>
    </div>
</template>

<script>
import { Skeleton, List, PullRefresh, Popup} from 'vant';
import { getThousandNum } from '@/utils/utils.js';
import QRCode from 'qrcodejs2'
export default {
    components: {
        [Skeleton.name]: Skeleton,
        [List.name]: List,
        [PullRefresh.name]: PullRefresh,//下拉刷新
        [Popup.name]: Popup
    },
    data() {
        return {
            medicalId: null,
            loading: false,
            listData:[],
            showQRcode: false,
            qrcode: null,
            qrcodeHref: null
        }
    },
    created() {
        this.medicalId = this.$route.query.id ? this.$aseDecode(this.$route.query.id,this.$constJs.doctorId) : null
    },
    methods: {
        clickQRcode() {
            this.showQRcode = !this.showQRcode
            this.$nextTick(function(){
                //这里写方法
                if (this.showQRcode) {
                    this.createQrCode(this.$refs.qrcode, this.doctorData.type);
                }
            });
        },
        createQrCode(qrstr, type){
            //创建二维码
            let _url = `${window.location.origin}?id=${this.medicalId}`
            if(type == 'heart'){
                _url += `&classify=heart`
            }
            if (this.qrcode == null) {
                this.qrcode = new QRCode(qrstr,{
                    width: 400,
                    height: 400,
                    text: _url
                    // background: '#f0f',
                // foreground: '#ff0'
                })
                let timer = setTimeout(() => {
                    // const img = qrstr.querySelector("img");
                    const canvas = document.getElementsByTagName("canvas")[0];
                    var ctx = canvas.getContext("2d");
                    var img = new Image;
                    // 获取图片地址
                    img.src = require('@/images/mailiu_logo.jpg')

                    // 开启跨域支持
                    img.crossOrigin = "*";

                    // 开始绘制的横坐标
                    var x = 140;
                    // 开始绘制的纵坐标
                    var y = 140;
                    // 绘制的宽度
                    var width = 120;
                    // 绘制的高度
                    var height = 120;
                    // 图片加载完成后执行
                    img.onload = () => {
                        ctx.beginPath();
                        //  ctx.arcTo(x + w, y, x + w, y + h, r);
                        ctx.arc(200, 200, 80, 0, Math.PI * 2);
                        // ctx.fillStyle('#ffffff')
                        // ctx.fill()//保证图片无bug填充
                        ctx.clip();//画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内
                        // 绘制图片
                        ctx.drawImage(img, x, y, width, height);
                        ctx.restore();
                        ctx.closePath();
                        this.qrcodeHref = canvas.toDataURL("image/png");
                        clearTimeout(timer)
                    }
                }, 100);
            }
        }
    },
}
</script>

<style lang="less">
.wechat{
    &.staff-doctor{
        .van-popup__close-icon--top-right{
            top: 0.2rem;
            right: 0.2rem;
            font-size: 0.38rem;
            color: #474747;
        }
        .qrcode{
            display: none;
            .qrcode_icon{
                width: 84px;
                height: 84px;
                border-radius: 12px;
                border: 1px solid blue;
            }
        }
        .qrcode_box{
            width: 4.8rem;
            height: 5.86rem;
            color: #878787;
            font-size: 0.3rem;
            text-align: center;
            line-height: 0.7rem;
            border-radius: 0.12rem;
            .qrcode_img{
                width: 3.8rem;
                height: 3.8rem ;
                margin: 0 auto;
                margin-top: 0.9rem;
                margin-bottom: -0.03rem;
            }
        }
    }
}
</style>
<style lang="less" scoped>
.wechat{
    &.staff-doctor{
        &.wechat.ui-top-main-bj{
            background-size: 100% 3.76rem;
                .QRcode{
                    font-size: 0.26rem;
                    .svg-icon{
                        font-size: 0.68rem;
                    }
                }
            }
        }
    }
}
</style>

4、二维码效果