vue3 使用 qrcode.vue 生成二维码

一、效果展示

点击按钮，弹框展示二维码

二、使用步骤

1.下载引入

官网地址：https://www.npmjs.com/package/qrcode.vue

代码如下（示例）：

npm i qrcode.vue

2.模板中使用

代码如下（示例）：

<template>
  <el-button @click="showHandler">按钮</el-button>
  <el-dialog
    v-model="qrcodeShow"
    @close="closeHandler"
    width="340"
    align-center
  >
    <qrcode-vue :value="qrCode" size="300" />
  </el-dialog>


</template>

<script setup lang="ts">
import { ref } from "vue";
import QrcodeVue from "qrcode.vue";

const qrcodeShow = ref(false);
const qrCode = ref("");

const showHandler = () => {
  qrcodeShow.value = true;
  // 此处赋值，使用网络请求的数据
  qrCode.value = "二维码本码";
};
const closeHandler = () => {
  qrcodeShow.value = false;
};
</script>

<style scoped lang="scss">
</style>