与后端生成二维码相比,前端生成二维码更具有灵活性,下面就介绍两种前端生成二维码的方式,两种方式相比之下,vue-qr比qrcode多了一个再中间添加logo的功能。
方式一:qrcode
- npm
1
|
npm install --save qrcodejs2
|
- import
1
|
import QRCode from 'qrcodejs2'
|
- 使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<div class= "qrcode" ref= "qrCodeUrl" ></div>
<script>
methods: {
creatQrCode() {
var qrcode = new QRCode( this .$refs.qrCodeUrl, {
text: 'xxxx' , // 需要转换为二维码的内容
width: 100,
height: 100,
colorDark: '#000000' ,
colorLight: '#ffffff' ,
correctLevel: QRCode.CorrectLevel.H
})
},
},
mounted() {
this .creatQrCode();
},
</script>
|
- 样式(这里再提供一个给二维码添加边框的小技巧:如下图所示,我们生成的二维码是没有边框的,看起来不是很好看)
就有了下面的效果:
方式二:vue-qr
- npm
1
|
npm install vue-qr --save
|
- import
1
|
import vueQr from 'vue-qr'
|
- 使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
// logoSrc为logo的url地址(使用require的方式);text为需要转换为二维码的内容
<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——前端生成二维码的示例的详细内容,更多关于vue 前端生成二维码的资料请关注服务器之家其它相关文章!
原文链接:https://www.cnblogs.com/belongs-to-qinghua/p/12197878.html