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

组件的形式创建

1.下载依赖

npm install qrcodejs2

 



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

 1 //template中的代码
 2 <template>
 3 <div class="boxshow">
 4 <div class="qrcode" ref="qrcodeContainer"></div>
 5 </div>
 6 </template>
 7 <script>
 8 import QRCode from 'qrcodejs2' // 引入qrcode
 9 export default {
10 name: 'test',
11 props: {
12 QRCodetext: {
13 type: String,//类型限定
14 default: '' //默认
15 }
16 },
17 mounted() {
18 this.$nextTick(() => {
19 this.qrcode()
20 })
21 },
22 methods: {
23 qrcode() {
24 let qrcode = new QRCode(this.$refs.qrcodeContainer, {
25 width: 100,// 二维码的宽
26 height: 100,// 二维码的高
27 text: this.QRCodetext ? this.QRCodetext : '', // 二维码的内容
28 colorDark: '#000',// 二维码的颜色
29 colorLight: '#fff',
30 correctLevel: QRCode.CorrectLevel.H
31 })
32 }
33 }
34 }
35 </script>

 


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

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

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


 1 npm install less 

 1 <style lang='less'>
 2 .boxShadow {
 3 padding: 20px 0 0 40px;
 4 .qrcode {
 5 box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
 6 display: inline-block;
 7 img {
 8 width: 132px;
 9 height: 132px;
10 background-color: #fff; //设置白色背景色也可以设置别的看业务需求
11 padding: 6px; // 利用padding
12 }
13 }
14 }
15 </style>
16 
17 //不用less的 注意要更有针对性 避免污染
18 <style>
19 .boxShadow {
20 padding: 20px 0 0 40px;
21 }
22 .qrcode {
23 box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
24 display: inline-block;
25 }
26 img {
27 width: 132px;
28 height: 132px;
29 background-color: #fff;/* 设置白色背景色*/
30 padding: 6px;
31 }
32 </style>

 

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

 1 <template>
 2 <QRCode ref="qrcode" :QRCodetext="QRCodetext"></QRCode>
 3 </template>
 4 <script>
 5 import QRCode from '../compon/qrcodejs2'
 6 export default {
 7 name: '',
 8 data() {
 9 return {
10 QRCodetext: '',
11 }
12 },
13 created() {
14 this.QRCodetext = 'www.baidu.com'//想要的内容
15 },
16 mounted() {},
17 methods: {}，
18 components: { QRCode }
19 }
20 </script>

 



ok！去玩耍吧

 

 

posted @ 2020-06-18 11:12  昊祺  阅读(2112)  评论(0)  编辑  收藏  举报