欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue——前端生成二维码的示例

程序员文章站 2022-07-05 19:54:44
与后端生成二维码相比,前端生成二维码更具有灵活性,下面就介绍两种前端生成二维码的方式,两种方式相比之下,vue-qr比qrcode多了一个再中间添加logo的功能。方式一:qrcode npmnpm...

  与后端生成二维码相比,前端生成二维码更具有灵活性,下面就介绍两种前端生成二维码的方式,两种方式相比之下,vue-qr比qrcode多了一个再中间添加logo的功能。

方式一:qrcode

  • npm
npm install --save qrcodejs2
  • import
import qrcode from 'qrcodejs2'
  • 使用
<div class="qrcode" ref="qrcodeurl"></div>
 
<script>
methods: {
    creatqrcode() {
        var qrcode = new qrcode(this.$refs.qrcodeurl, {
            text: 'xxxx', // 需要转换为二维码的内容
            width: 100,
            height: 100,
            colordark: '#000000',
            colorlight: '#ffffff',
            correctlevel: qrcode.correctlevel.h
        })
    },
},
mounted() {
    this.creatqrcode();
},
</script>
  • 样式(这里再提供一个给二维码添加边框的小技巧:如下图所示,我们生成的二维码是没有边框的,看起来不是很好看) 

Vue——前端生成二维码的示例

就有了下面的效果:

Vue——前端生成二维码的示例

方式二:vue-qr

  • npm
npm install vue-qr --save
  • import
import vueqr from 'vue-qr'
  • 使用
// logosrc为logo的url地址(使用require的方式);text为需要转换为二维码的内容
<vue-qr :logosrc="imageurl" text="xxx" :size="200"></vue-qr>
 
<script>
    export default {
        name: "qecode",
        data() {
            return {
                imageurl: require("../assets/logo.png"),
            }
        },
        components: {
            vueqr
        },
    },
}
</script>

以上就是vue——前端生成二维码的示例的详细内容,更多关于vue 前端生成二维码的资料请关注其它相关文章!