使用vue-qr

npm
npm install vue-qr --save

import
import vueQr from 'vue-qr'

使用
<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生成二维码的两个插件
前段时间有个需求需要用到二维码，特意找了一些相关插件，发现了两个还是好用的分享给大家。

简单介绍一下如何避免踩坑。
第一种方法  qrcodejs2

第一步：下载插件qrcodejs2


npm install qrcodejs2 --save


第二步：给你准备放入二维码的标签一个id属性 ( 例如：id=“qrcode”)

<template>
    <div>
        <div id="qrcode"></div> //必须是id 和实例化的第一参数对应
    </div>
</template>


通过在methods中写入一个方法用来调用实现二维码的生成， 例如需要二维码弹出的时候调用
我这里写的是在组件渲染完毕后直接渲染出来

<script>
	import QRCode from 'qrcodejs2';
	export default {
	    mounted () {
	        this.qrcode(); //调用二维码生成的方法
	    },
	    methods: {
	        qrcode () {
	            // 和div的id相同 必须是id  class类名会报错
	            // 第二参数是他的配置项
	            let qrCode = new QRCode('qrcode', {
	                width: 150,
	                height: 150,
	                text: 'http://www.baidu.com',
	                colorDark: '#ccc',
	                colorLight: 'yellow'
	            })
	        }
	    }
	}
</script>





第一个是基础款，第二个是加了colorDark的属性

参数说明：




属性
是否必填




width (必填项)
宽度(Number)


margin(必填)
边距-默认值为20


bgSrc(选填)
背景图片


logoSrc(选填)
中间的图片


gifBgSrc(选填)
动态背景图 (设置此选项会影响性能)


colorDark(选填)
二维码颜色(实点颜色)


colorLight(选填)
二维码背景填充色


callback(选填)
生成的二维码 Data URI，可以在回调中取得


注意！！！ width 和 height必须是数值,如果写成 width:‘150px’ 就会报错❤
第二种方法 vue-qr
这个插件比起第一个多了一些功能，例如背景图片，类似我们微信个人名片的logo头像，更有趣的是可以社做动态gif图片作为背景图

第一步：下载插件vue-qr


npm install vue-qr --save


第二步：引入组件，挂载到components中，在template里写入组件

<template>
    <div>
       <VueQr :margin='20' :size='200' :text='config.text'></VueQr>
    </div>
</template>


第三步：在data中默认返回一个二维码的配置项参数

<script>
import VueQr from 'vue-qr';
export default {
    data () {
        return {
            config: {
                text:'123',		//必须写text属性
                bgSrc: require('../img/chicken.jpg'),
                logoSrc: require('../img/dao.jpg'),
                gifBgSrc: require('../img/dog.gif')
            }
        }
    },
    components: {
        VueQr
    }
}
</script>

大概就是这样子 我写了三个跳转百度页面的二维码



最后要注意的是，引入图片文件的时候注意使用require引入，直接写图片路径是会报错的

参数说明：




属性
是否必填




text （必填）
可以写路径或者文字，扫描后想要跳转的路径或者显示的文字


size （必填）
二维码尺寸 长宽一致, 包含外边距


margin（必填）
二维码距离外边框的边距 - 默认值为20


bgSrc（选填）
背景图片


logoSrc（选填）
中间的图片


gifBgSrc （选填）
动态背景图 (设置此选项会影响性能)


colorDark（选填）
二维码颜色(实点颜色)


colorLight（选填）
二维码背景填充色


callback（选填）
生成的二维码 Data URI，可以在回调中取得


第一次发帖，做的不够好大家多担待！如有转帖请注明出处，最后欢迎大牛们来指点，谢谢！

第一步 下载插件
cnpm install --save qrcodejs2

第二步，在组件中使用
<template>
    <div class="qrcode_box">
        <div id="qrcode"></div>
    </div>
</template>

<script>
import QRCode from 'qrcodejs2'; // 引入qrcode
export default {
  name: 'test',
  mounted() {
    this.qrcode();
  },
  methods: {
    qrcode() {
      let qrcode = new QRCode('qrcode', {
        width: 132,
        height: 132,
        text: 'https://www.baidu.com', // 二维码地址
        colorDark: '#000',
        colorLight: '#fff'
      });
    }
  }
};
</script>

<style>
.qrcode_box {
  width: 2.58rem;
  height: 2.58rem;
  margin-left: 2.46rem;
  margin-top: 0.26rem;
}
</style>

1.需求

我们有一个项目是给某大会签到入场的项目，整体的需求是嘉宾媒体之类的用户线上注册然后生成线下证照，这里就讲一下碰到的几个问题，记录一下~！

2.具体过程如下

1.安装 qrcodejs2
	npm install  qrcodejs2 --save

2.在main.js或者是需要使用的页面引入
import QRCode from 'qrcodejs2'

3.生成二维码的页面
  <div id="qrCode" ref="qrCodeDiv"></div>

4.js里的方法
 //打印二维码的方法
      bindQRCode: function () {
        new QRCode(this.$refs.qrCodeDiv, {
          text: '扫描二维码之后展示的内容'
          width: 100,
          height: 100,
          colorDark: "#333333", //二维码颜色
          colorLight: "#ffffff", //二维码背景色
          correctLevel: QRCode.CorrectLevel.L //容错率，L/M/H
        })
      },

3.打印内容

这里打印的话有好几种方法，我就简单的讲一下这几种打印方法的注意事项。

vue的打印插件
cnpm i vue-print-nb -S

. 在需要打印的位置使用
<div id="dialogContent">
  <p style="text-align: center">
    {{ form.status === '条件' ? '标题一' : '标题二' }}
  </p>
  <div class="table-layout">
    <!--内容-->
  </div>
</div>

4. 打印
<button v-print="'#dialogContent'">打印</button>

这种方法的缺点就是只能打印可见区域，不能分页打印

方法二：print.js
1. 安装依赖
cnpm install vuePlugs_printjs -S

2. 引入
import Print from '@/plugins/print'   // 下载到本地地址
Vue.use(Print)

3. 使用
<template>
    <div ref="print">
    <!--打印内容-->
    <div class="no-print">不要打印我</div>
    </div>
    <a-button @click="prints">打印</a-button>
</template>
<script>
export default {
  data () {
    return {}
  },
  methods: {
    prints () {
      this.$print(this.$refs.print)
    }
  }
}
</script>

注意：

需使用ref获取dom节点，若直接通过id或class获取则webpack打包部署后打印内容为空

4.总结

这里我就粗略的讲了一下这几种方法是怎么实现的，其实后续还有很多可以拓展的问题需要解决，如果是弹窗打印的话会出现好几个问题，比如说第一次弹出不加载二维码。
  let doc_body = document.body.innerHTML,
          printPart = document.getElementById("dialogContent").innerHTML;
        document.body.innerHTML = printPart;
        window.print(); //只能打印当前页面body里面的全部内容，所以打印之前，要替换body里面的内容
        document.body.innerHTML = doc_body;
        window.location.reload(false); //重新刷新页面的时候会出现首页白屏，用户体验不好


这里虽然解决了第一次弹框没有出现二维码的问题，但是重新刷新页面的时候会出现白屏，用户体验不好，这里有待优化。暂时我也还没排查出问题出现在哪？后续会继续跟进！

如果有什么问题，可以到下方评论区留言。如果各位大神已有解决方法，可以留言告诉我，我也参考参考~。