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