利用VUE生成二维码（两种方式）

利用Vue生成二维码
Author：kak

vue有两种生成二维码的方式，qrcode、vue-qr（有icon）；

1、qrcode
npm “install` `–save qrcodejs2
//所需页面导入
import QRCode from ‘qrcodejs2’
 
<div class=”qrcode” ref=”qrCodeUrl”></div>
<script>
import QRCode from ‘qrcodejs2’
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();
},
};
</script>

2、vue-qr
可以增加icon

npm install vue-qr –save
import vueQr from ‘vue-qr’
 
<vue-qr :logoSrc=”imageUrl” text=”https://blog.csdn.net/weixin_42601136″ :size=”200″></vue-qr>

<script>
export default {
name: “qecode”,
data() {
return {
imageUrl: require(“../img/logo.png”),//icon路径
}
},
components: {
vueQr
},
},
}
</script> 

————————————————
版权声明：本文为CSDN博主「Willing卡卡」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42601136/article/details/114839489