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>

相关配置属性