与后端生成二维码相比，前端生成二维码更具有灵活性，下面就介绍两种前端生成二维码的方式，两种方式相比之下，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
