vue cli3项目中使用qrcodejs2生成二维码

组件的形式创建

1.下载依赖

npm install qrcodejs2

2.创建一个.vue的组件放置代码（我创建的是qrcodejs2.vue）

 //template中的代码
 <template>
 <div class="boxshow">
 <div class="qrcode" ref="qrcodeContainer"></div>
 </div>
 </template>
 <script>
 import QRCode from 'qrcodejs2' // 引入qrcode
 export default {
 name: 'test',
 props: {
 QRCodetext: {
 type: String,//类型限定
 default: '' //默认
 }
 },
 mounted() {
 this.$nextTick(() => {
 this.qrcode()
 })
 },
 methods: {
 qrcode() {
 let qrcode = new QRCode(this.$refs.qrcodeContainer, {
 width: 100,// 二维码的宽
 height: 100,// 二维码的高
 text: this.QRCodetext ? this.QRCodetext : '', // 二维码的内容
 colorDark: '#000',// 二维码的颜色
 colorLight: '#fff',
 correctLevel: QRCode.CorrectLevel.H
 })
 }
 }
 }
 </script>

通过qrcodejs2生成的二维码本身是没有白边的

如果想像这样生成一个有边框的的二维码，更好看一点 我这边用了box-shadow属性修改后 看起来是不是高大上一点 哈哈哈哈哈哈哈

上代码 这是需要安装less的插件 也可以不用

npm install less

 <style lang='less'>
 .boxShadow {
 padding: 20px 0 0 40px;
 .qrcode {
 box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
 display: inline-block;
 img {
 width: 132px;
 height: 132px;
 background-color: #fff; //设置白色背景色也可以设置别的看业务需求
 padding: 6px; // 利用padding
 }
 }
 }
 </style>

 //不用less的 注意要更有针对性 避免污染
 <style>
 .boxShadow {
 padding: 20px 0 0 40px;
 }
 .qrcode {
 box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
 display: inline-block;
 }
 img {
 width: 132px;
 height: 132px;
 background-color: #fff;/* 设置白色背景色*/
 padding: 6px;
 }
 </style>

3.使用的的话直接引入 祖册即可

 <template>
 <QRCode ref="qrcode" :QRCodetext="QRCodetext"></QRCode>
 </template>
 <script>
 import QRCode from '../compon/qrcodejs2'
 export default {
 name: '',
 data() {
 return {
 QRCodetext: '',
 }
 },
 created() {
 this.QRCodetext = 'www.baidu.com'//想要的内容
 },
 mounted() {},
 methods: {}，
 components: { QRCode }
 }
 </script>

ok！去玩耍吧