vue 生成二维码的两种方式-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue 生成二维码的两种方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

方式一：qrcode（无 icon 图标）

npm i qrcodejs2 --save

完整代码

<template>
  <div class="flex-box">
    <div>qrcode（无 icon 图标）</div>
    <div class="qr-code" ref="qrCodeUrl"></div>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2';

export default {
  data() {
    return {};
  },
  methods: {
    /* 创建二维码 */
    creatQrCode() {
      new QRCode(this.$refs.qrCodeUrl, {
        text: 'https://blog.csdn.net/AdminGuan', // 二维码的内容
        width: 150,
        height: 150,
        colorDark: '#000',
        colorLight: '#fff',
        correctLevel: QRCode.CorrectLevel.H
      });
    }
  },
  mounted() {
    this.creatQrCode(); // 创建二维码
  }
};
</script>

<style scoped>
.flex-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.qr-code {
  padding: 10px;
  margin-top: 20px;
  background-color: #fff;
  border: 1px solid red;
}
</style>

方式二：vue-qr（有 icon 图标）

官网地址：vue-qr - npm

npm install vue-qr --save

import 引入方式

import vueQr from 'vue-qr'; // vue2.0

import vueQr from 'vue-qr/src/packages/vue-qr.vue'; // vue3.0 (support vite)

完整代码

<template>
  <div class="flex-box">
    <div>vue-qr（有 icon 图标）</div>
    <vue-qr class="qr-code" :logoSrc="imageUrl" :text="qrCodeUrl" :size="150" />
  </div>
</template>

<script>
import vueQr from 'vue-qr'; // vue2.0
// import vueQr from 'vue-qr/src/packages/vue-qr.vue'; // vue3.0 (support vite)

export default {
  components: { vueQr },
  data() {
    return {
      qrCodeUrl: 'https://blog.csdn.net/AdminGuan', // 二维码的内容
      imageUrl: require('../assets/default.jpg') // icon路径
    };
  },
  methods: {}
};
</script>

<style scoped>
.flex-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.qr-code {
  margin-top: 20px;
  background-color: #fff;
  border: 1px solid red;
}
</style>

相关配置属性文章来源地址https://www.toymoban.com/news/detail-611360.html

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