ausheng

VUE生成二维码

vue有两种生成二维码的方式,qrcode、vue-qr(有icon)

1. qrcode

npm i qrcodejs2 --save
<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

npm i vue-qr --save
<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>

原文连接:https://blog.csdn.net/qq_40881695/article/details/121648196

参考链接
qrcode:https://github.com/davidshimjs/qrcodejs
vue-qr:https://github.com/Binaryify/vue-qr#readme

ausheng

爱生活,爱编程

AUSHENG – BLOG

不要害羞,保持联系。我们喜欢结识有趣的人,结交新朋友。