vue3 根据vue-qr生成带logo图片的二维码

天下皆白_唯我独黑

已于 2023-03-21 16:19:56 修改

阅读量1.3k

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2023-03-21 16:11:19 首次发布

本文链接：https://blog.csdn.net/qq_24909089/article/details/129690693

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

官网地址 vue-qr - npm

vue有两种生成二维码的方式，qrcode、vue-qr（有icon可以加图片）

安装插件

npm install vue-qr --save

引用方式

// vue2.0
import VueQr from 'vue-qr'

// vue3.0 (support vite)
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
...
{
  components: {VueQr}
}

页面代码

<el-form style="text-align:center">
    <div class="dialog-footer"  >{{gameInfo.name}}:{{gameInfo.code}}</div>
    <vue-qr
        :text='contentValue' //二维码内容
        :logoSrc='logoSrc' //logo
        :logoScale = 0.2 //logo大小
        :margin = 10
    ></vue-qr>
</el-form>

js代码

/**
 * 生成二维码
 * @param classId
 * @param row
 * @returns {Promise<void>}
 */
const classIdMarkDev = ref(false) //二维码弹框显示
const gameInfo = ref({}) //二维码内容
const logoSrc = ref({}) //图片地址
const contentValue = ref({}) //二维码内容json

let quickMark = async (classId, row) => {
  console.log(row)
  // console.log(row.ID)

  //数据
  gameInfo.value = {
    gameId: row.ID,
    name: row.name,
    code: row.code,
    creationTime: parseInt(new Date().getTime() / 1000)
  }
  classIdMarkDev.value = true

  //延迟加载等DOM元素加载完再执行
  nextTick(() => {
    logoSrc.value = quickMarkLogoUrl.value
    //二维码数据，扫描二维码后拿到的内容
    contentValue.value = JSON.stringify(gameInfo.value)
    console.log('content',contentValue)
  })
}

效果：

参数	说明
text	二维码内容（必需）
size	尺寸, 长宽一致, 包含外边距（必需）
margin	二维码图像的外边距, 默认 20px （可选）
dotScale	数据区域点缩小比例,默认为0.35 （可选）
correctLevel	容错级别 0-3 （可选）
whiteMargin	若设为 true, 背景图外将绘制白色边框（默认是true）（可选）
bindElement	指定是否需要自动将生成的二维码绑定到HTML上（默认是true）（可选）
callback	生成的二维码 Data URI 可以在回调中取得,第一个参数为二维码 data URL, 第二个参数为 props 传过来的 qid(因为二维码生成是异步的,所以加个 id 用于排序)
颜色	–
colorDark	实点的颜色（可选）
colorLight	空白区的颜色（可选）
autoColor	若为 true, 背景图的主要颜色将作为实点的颜色, 即 colorDark,默认 true // 若设置了 autoColor，则 colorDark 和 colorLight 都将被忽略。（可选）
背景图像	–
bgSrc	欲嵌入的背景图地址（可选）
gifBgSrc	欲嵌入的背景图 gif 地址,设置后普通的背景图将失效。设置此选项会影响性能（可选）
backgroundColor	背景色（可选）
backgroundDimming	叠加在背景图上的颜色, 在解码有难度的时有一定帮助（可选）
logo图像	–
logoSrc	嵌入至二维码中心的 LOGO 地址（可选）
logoScale	用于计算 LOGO 大小的值, 过大将导致解码失败, LOGO 尺寸计算公式，logoScale(size-2margin), 默认 0.2 （可选）
logoMargin	标识周围的空白边框, 默认为0 （可选）
logoBackgroundColor	背景色,需要设置 logo margin （可选）
logoCornerRadius	标识及其边框的圆角半径, 默认为0 （可选）
后处理
binarize	若为 true, 图像将被二值化处理, 未指定阈值则使用默认值，默认是false （可选）
binarizeThreshold	(0 < threshold < 255) 二值化处理的阈值（可选）