From 0db50921e776525ac6d35fe50e64c605b6be1374 Mon Sep 17 00:00:00 2001
From: zhangchen <1652267879@qq.com>
Date: 星期四, 04 九月 2025 14:59:11 +0800
Subject: [PATCH] Merge branch 'ID1766-添加推送登录功能' into test
---
src/components/QrCode/index.vue | 89 ++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 89 insertions(+), 0 deletions(-)
diff --git a/src/components/QrCode/index.vue b/src/components/QrCode/index.vue
new file mode 100644
index 0000000..7ea79c2
--- /dev/null
+++ b/src/components/QrCode/index.vue
@@ -0,0 +1,89 @@
+<template>
+ <img :src="qrCodeUrl" alt="" srcset="" style="width: 100%; height: 100%;" />
+</template>
+
+<script lang="ts">
+import { onMounted, reactive, toRefs, watch } from "vue";
+import QrCode from "qrcode";
+export default {
+ name: "QrCode",
+ props: {
+ width: {
+ type: Number,
+ default: 200,
+ },
+ height: {
+ type: Number,
+ default: 200,
+ },
+ colorDark: {
+ type: String,
+ default: "#000000",
+ },
+ colorLight: {
+ type: String,
+ default: "#ffffff",
+ },
+ margin: {
+ type: Number,
+ default: 4,
+ },
+ value: {
+ type: Object,
+ },
+ },
+ setup(props, contxt) {
+ let debounceTimer: any;
+ const state = reactive({
+ qrCodeUrl: "",
+ });
+
+ watch(
+ () => props.value,
+ () => {
+ console.log('二维码触发了')
+ debounceTimer && clearTimeout(debounceTimer);
+ debounceTimer = setTimeout(generateQRCode, 500);
+ }, { deep: true }
+ );
+
+ /** 生成二维码 */
+ const generateQRCode = () => {
+ if (!props.value) {
+ state.qrCodeUrl = "";
+ contxt.emit("error", { message: "二维码内容为空" });
+ return;
+ }
+ const options = {
+ width: props.width,
+ height: props.height,
+ margin: props.margin,
+ color: {
+ dark: props.colorDark,
+ light: props.colorLight,
+ },
+ };
+ QrCode.toDataURL(JSON.stringify(props.value), options, (error, url) => {
+ if (error) {
+ console.error("二维码生成失败: ", error);
+ contxt.emit("error", { message: "二维码生成失败" });
+ return;
+ }
+ state.qrCodeUrl = url;
+ });
+ };
+
+ onMounted(() => {
+ generateQRCode();
+ })
+
+ return {
+ ...toRefs(state),
+ generateQRCode,
+ };
+ },
+};
+</script>
+
+<style lang="less" scoped>
+</style>
\ No newline at end of file
--
Gitblit v1.8.0