vue项目使用二维码

需求：有些时候我们需要存储一些信息用二维码来展示，但我们如何在二维码内使用呢，废话不多说，开搞。

方方一：vue-qr

vue-qr ：不仅可以生成二维码，还可以添加二维码中间的logo图片

1.npm安装包

npm install vue-qr --save

2.引入

import vueQr from "vue-qr";

3.组件使用

<vue-qr :logoSrc="imageUrl" :text="getcode" :size="200"></vue-qr>

4.完整代码（仅供参考）

<template>
  <div>
    <vue-qr :logoSrc="imageUrl" :text="getcode" :size="200"></vue-qr>
  </div>
</template>
<script>
import vueQr from "vue-qr";
export default {
  name: "qecode",
  data() {
    return {
        // 此处设置的为logo图片
      imageUrl: require("../../assets/logo.png"),
      text: {
        name: "小白",
        age: "22",
        sex: "男",
      },
      code: "",
    };
  },
  components: {
    vueQr,
  },
  computed: {
    //   通过计算属性的方法 计算出需要的信息-- 计算属性个data声明的变量一样可以在文档中直接饮用
    getcode() {
        // 通过拼接展示 需要的信息
      let code ="姓名:" + this.text.name +",年龄：" + this.text.age + ",性别：" + this.text.sex;
      this.code = code;
      return code;
    },
  },
  mounted() {},
  methods: {},
};
</script>

5.效果展示

方法二：QRcode

1.安装

npm install qrcodejs2

2.引入

import QRCode from 'qrcodejs2'

3.组件使用

import QRCode from 'qrcodejs2'

4.完整代码

<template>
  <div>
    <div class="qrcode" ref="qrCodeUrl"></div>
  </div>
</template>
<script>
import QRCode from "qrcodejs2";
export default {
  data() {
    return {
      obj: {
        name: "你好",
        age: 18,
        info: "二维码",
      },
    };
  },
  methods: {
    creatQrCode() {
      var qrcode = new QRCode(this.$refs.qrCodeUrl, {
        text: this.obj.name + this.obj.age + this.obj.info,
        width: 100,
        height: 100,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H,
      });
    },
  },
  mounted() {
    this.creatQrCode();
  },
};
</script>

5.效果展示