短视频平台源码,分享时生成二维码的两种方式
短视频平台源码,分享时生成二维码的两种方式实现的相关代码
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
<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;
padding: 6px;
box-sizing: border-box;
}
</style>
以上就是短视频平台源码,分享时生成二维码的两种方式实现的相关代码, 更多内容欢迎关注之后的文章