vue2 pc side activates payment QR code qrcode

What is QRCode.js?

QRCode.js is a JavaScript library for generating QR codes. It is mainly obtained by obtaining DOM tags and then drawing them through HTML5 Canvas, without relying on any library.

1.qrcode is translated as QR code.

2. Download the plug-in

npm i qrcode

<template>
	<div class="home">
		<canvas ref="canvas"></canvas>
		<button @click="add">支付(生成二维码)</button>
	</div>
</template>

<script>
import QRCode from 'qrcode'
export default {
	name: 'HomeView',
	data() {
		return {
			canvas: {},
		}
	},
	methods: {
		add() {
			// 后端返回的url放在这里，变成一张二维码，我在这里写的是百度的官网
			QRCode.toCanvas(
				this.$refs.canvas,
				'https://www.baidu.com/',
				function (error) {
					if (error) console.error(error)
					console.log('success!')
				}
			)
		},
	},
}
</script>

Change the url address to the payment address given by the backend.