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, {
 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 {
 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 {
 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！去玩耍吧