vue 用链接做二维码组件

1. 前言

项目中，需要将url链接生成二维码。

2. 问题

• 生成二维码的配置项
• 二维码内部嵌入背景图
• 二维码嵌入LOGO
• ...

3. 解答

• vue-qr 生成二维码

1）安装依赖

npm install vue-qr --save
//或者
yarn add vue-qr

2）组件内引用

import VueQr from "vue-qr";
export default {
  components: {
    VueQr
  },
};

3）全局注册组件

// main.js文件
import Vue from 'vue'
import VueQr from 'vue-qr'

// 全局注册vue-qr组件
Vue.component('vue-qr', VueQr)

4）组件使用

<template>
  <div>
    <vue-qr :text="url" :size="200" :logoSrc='logoSrc'></vue-qr>
  </div>
</template>

<script>
import VueQr from "vue-qr";
export default {
  components: { VueQr },
  data() {
    return {
      url: 'https://www.baidu.com'
      logoSrc:'./'
    }
  }
}
</script>

• 效果

• 配置项（部分）

参数	说明	类型	默认值
text	编码的内容	string	--
correctLevel	容错级别 0-3。链接越长，需要更高等级的容错级别。	num	--
size	尺寸, 长宽一致, 包含外边距	num	--
margin	二维码图像的外边距	string	20px
bgSrc	嵌入的背景图地址	string	--
logoSrc	嵌入至二维码中心的 LOGO 地址	string	--
logoScale	用于计算 LOGO 大小的值, 过大将导致解码失败, LOGO 尺寸计算公式 logoScale*(size-2*margin)	num	0.2
callback	回调函数,第一个参数为二维码 data URL, 第二个参数为 props 传过来的 qid(因为二维码生成是异步的,所以加个 id 用于排序)	function	(url,qid)=>{}

4. 后记

在小程序上生成好像会有占位错误，有待观察...

5. 引用来源

作者：miaomiaowins

文章链接：blog.csdn.net/miaomiaowin…

违规请联系删除，plz。