短视频平台源码，分享时生成二维码的两种方式

短视频平台源码，分享时生成二维码的两种方式实现的相关代码

1、qrcode

 

1

npm ``install` `--save qrcodejs2<br>//所需页面导入<br>import QRCode from 'qrcodejs2'<br><div class="qrcode" ref="qrCodeUrl"></div><br><script><br>import QRCode from 'qrcodejs2'<br>export default {<br>  data() {<br>    return {<br>  },<br>  methods: {<br>    creatQrCode() {<br>        var qrcode = new QRCode(this.$refs.qrCodeUrl, {<br>            text: 'https://blog.csdn.net/weixin_42601136', // 需要转换为二维码的内容<br>            width: 100,<br>            height: 100,<br>            colorDark: '#000000',<br>            colorLight: '#ffffff',<br>            correctLevel: QRCode.CorrectLevel.H<br>        })<br>    },<br>},<br>mounted() {<br>    this.creatQrCode();<br>},<br>};

​

</script>

2、vue-qr

 

1

<br><template><br>  <div><br>    <div class="qrcode" ref="qrCodeUrl"></div><br>    <vue-qr :logoSrc="imageUrl" text="https://blog.csdn.net/weixin_42601136" :size="200"></vue-qr><br>  </div><br></template><br><script><br>import QRCode from "qrcodejs2";<br>import vueQr from "vue-qr";<br>export default {<br>  data() {<br>    return {<br>      imageUrl: require("./sw.jpg"),<br>    };<br>  },<br>  components: {<br>    vueQr,<br>  },<br>  methods: {<br>    creatQrCode() {<br>      var qrcode = new QRCode(this.$refs.qrCodeUrl, {<br>        text: "https://blog.csdn.net/weixin_42601136", // 需要转换为二维码的内容<br>        width: 100,<br>        height: 100,<br>        colorDark: "#000000",<br>        colorLight: "#ffffff",<br>        correctLevel: QRCode.CorrectLevel.H,<br>      });<br>    },<br>  },<br>  mounted() {<br>    this.creatQrCode();<br>  },<br>};<br></script><br><style scoped><br>.qrcode {<br>  display: inline-block;<br>  width: 132px;<br>  height: 132px;<br>  <br>  padding: 6px;<br>  box-sizing: border-box;<br>}<br></style>

 

以上就是短视频平台源码，分享时生成二维码的两种方式实现的相关代码， 更多内容欢迎关注之后的文章