Vue 中使用 qrcode.vue 生成二维码

一、安装插件

npm i qrcode.vue -S

二、使用组件

<template>
  <van-popup
    v-model="showQr"
    v-bind="popupConfig"
  >
    <div class="qrcode-wrapper">
      <div class="qrcode-title">
        <van-icon name="scan" />
        使用其他设备扫描二维码使用此 Chatbot
      </div>
      <qrcode-vue
        class="qrcode-code"
        level="H"
        :size="qrCodeSize"
        :value="value"
      />
    </div>
  </van-popup>
</template>

<script>
import { Popup, Icon } from 'vant';
import QrcodeVue from 'qrcode.vue';

export default {
	name: 'AppQrCode',
	components: {
	   [Popup.name]: Popup,
	   [Icon.name]: Icon,
	   QrcodeVue
	},
	props: {
	   popupConfig: {
	     type: Object,
	     default: () => ({
	       overlay: true,
	       position: 'bottom',
	       transitionAppear: true,
	       safeAreaInsetBottom: true,
	       closeable: true
	     })
	   }
	},
	data() {
		return {
			value: 'https://www.baidu.com',
			qrCodeSize: document.body.offsetWidth / 2
		}
	},
  	computed: {
    	showQr: {
      		get() {
        		return this.$store.getters.showQr;
      		},
      		set(val) {
        		this.$store.dispatch('app/toggleShowQr', val);
      		}
    	}
  	}
}
</script>

三、最终效果