【vue3 使用 qrcode】渲染二维码下方提示词，且自动调节文字大小

置顶

Red_Sugar

已于 2024-07-11 10:08:28 修改

阅读量628

点赞数 8

于 2024-06-27 10:42:50 首次发布

本文链接：https://blog.youkuaiyun.com/Red_Sugar/article/details/140007034

版权

先看最终效果图二维码已打码要不然会被吞

在这里插入图片描述

第一步先安装

yarn add qrcode

导入qrcode

import QRCode from 'qrcode'

封装方法

/**
 * 初始化canvas
 * @param content 二维码内容
 * @param size 二维码尺寸
 * @param qrText 二维码展示名
 * @param color 二维码颜色
 * @param fontSize 二维码展示名字体大小
 * @param fontWeight 二维码展示名字体粗细
 * @param bgc 二维码背景色
 * @param fontBgc 二维码展示名字体背景色
 * @param fontColor 二维码展示名字体颜色
 */
 const initCanvas = async ( content = '121233',size=200,  qrText ='默认展示名',color = '#000',fontSize=14,fontWeight='bold',bgc='#fff',fontBgc='#fff',fontColor="#333") => {
   
      const canvas = await QRCode.toCanvas(content, {
   
        errorCorrectionLevel: 'H',
        margin: 1