使用vue-qr生成漂亮的二维码

效果图

安装

npm install vue-qr --save

导入

// vue2.0
import VueQr from 'vue-qr'

...
{
  components: {VueQr}
}

用法

<vue-qr 
    :correctLevel="3" 
    :autoColor="false" 
    colorDark="#313a90" 
    :logoSrc="logoSrc" 
    :text="codeUrl" 
    :size="240" 
    :margin="0" 
    :logoMargin="3">
</vue-qr>

import VueQr from 'vue-qr'
export default {
  data () {
    return {
      logoSrc: require('../assets/weixin-head.jpg'),
      codeUrl: 'https://www.toutiao.com/article/7100763829256307215/'
    }
  },
  components: {
    VueQr
  }
}

参数	说明	是否必需
text	二维码内容	必需
autoColor	若为 true, 背景图的主要颜色将作为实点的颜色, 即 colorDark,默认 true	可选
colorDark	实点的颜色	可选
colorLight	空白区的颜色	可选
logoSrc	嵌入至二维码中心的 LOGO 地址	可选
size	尺寸, 长宽一致, 包含外边距	必需
margin	二维码图像的外边距, 默认 20px	可选
logoMargin	标识周围的空白边框, 默认为0	可选
correctLevel	容错级别 0-3	可选

更多配置项请参考官方文档。