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>

相关配置属性