vue有两种生成二维码的方式，qrcode、vue-qr（有icon）；
1. qrcode
- 安装依赖：
npm i qrcode —save
- 所需页面导入
import Vue from "vue"
import QRCode from "qrcode"
Vue.use(QRCode)
- 使用
<div class="qrcode" ref="qrCodeUrl"></div>
export default {
data() {
return {
},
methods: {
creatQrCode() {
var qrcode = new QRCode(this.$refs.qrCodeUrl, {
text: 'https://blog.csdn.net/weixin_42601136', // 需要转换为二维码的内容
width: 100,
height: 100,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.H
})
},
},
mounted() {
this.creatQrCode();
},
};
<style scoped>
.qrcode {
display: inline-block;
width: 132px;
height: 132px;
background-color: #fff;
padding: 6px;
box-sizing: border-box;
}
</style>
效果图
2. vue-qr
https://www.npmjs.com/package/vue-qr
- 安装依赖：
npm install vue-qr --save
- 所需页面导入
import vueQr from 'vue-qr'
3, 使用
<vue-qr :logoSrc="imageUrl" text="https://blog.csdn.net/weixin_42601136" :size="200"></vue-qr>
<script>
export default {
components: {
vueQr
},
data() {
return {
imageUrl: require("../img/logo.png"), //icon路径
}
},
},
}
</script>
