VUE使用QRcode或者vue-qr生成二维码

Posted zouwangblog

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VUE使用QRcode或者vue-qr生成二维码相关的知识,希望对你有一定的参考价值。

这里介绍两种vue生成二维码的方法

  1. QRcode
  2. vue-qr

vue-qr比QRcode功能多在可以在中间加logo

QRcode

npm

npm install qrcodejs2

import

在所需页面导入
import QRCode from ‘qrcodejs2‘

use

<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-qr

npm

npm install vue-qr --save

use

<vue-qr :logoSrc="imageUrl" text="xxx" :size="200"></vue-qr>
<script>
  import vueQr from 'vue-qr'
  export default 
    name: "qecode",
    data() 
      return 
        imageUrl: require("../assets/logo.png"),
      
    ,
    components: 
      vueQr
    ,
    ,
  
</script>

是不是比qrcode简单的多, 只不过两种生成二维码的样式还是有区别的,各有所爱吧,用哪个都可以

要注意一点,引用的img路径一定要加require

以上是关于VUE使用QRcode或者vue-qr生成二维码的主要内容,如果未能解决你的问题,请参考以下文章

vuepress引入vue-qr组件后build报错navigator is not defined问题

vue 中生成二维码之爬坑之路

Vue3二维码生成(简洁明了)

vue-qr二维码插件使用简介

vue+Qrcode实现动态生成二维码(图片格式,点击下载可保存本地)

vue中使用vue-qrcode生成二维码