利用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>
完整代码
<template>
<div>
<div class="qrcode" ref="qrCodeUrl"></div>
<vue-qr :logoSrc="imageUrl" text="https://blog.csdn.net/weixin_42601136" :size="200"></vue-qr>
</div>
</template>
<script>
import QRCode from "qrcodejs2";
import vueQr from "vue-qr";
export default {
data() {
return {
imageUrl: require("./sw.jpg"),
};
},
components: {
vueQr,
},
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>
<style scoped>
.qrcode {
display: inline-block;
width: 132px;
height: 132px;
background-color: #fff;
padding: 6px;
box-sizing: border-box;
}
</style>
更多推荐
已为社区贡献2条内容
所有评论(0)