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.效果展示