..

2025-08-27 12:02:30 +08:00
parent 514889e8e5
commit 1e9e14cc1f
73 changed files with 2506 additions and 3221 deletions
@@ -0,0 +1,100 @@
+<template>
+  <div>
+    <!-- 弹窗模式（默认） -->
+    <template v-if="mode === 'dialog'">
+      <!-- 触发按钮 -->
+<!--      <slot name="trigger">-->
+<!--        <el-button type="primary" size="small" @click="openDialog">二维码</el-button>-->
+<!--      </slot>-->
+
+      <!-- 弹出框 -->
+      <el-dialog
+          title="二维码"
+          :visible.sync="dialogVisible"
+          width="40%"
+          append-to-body
+      >
+        <div class="qrcode-container" style="text-align: center;">
+          <qrcode :value="url" :options="{ width: 126 }" class="signature-qrcode"></qrcode>
+        </div>
+        <template #footer>
+          <el-button @click="dialogVisible = false">关闭</el-button>
+        </template>
+      </el-dialog>
+    </template>
+
+    <!-- 内联模式 -->
+    <template v-else-if="mode === 'inline'">
+      <div class="qrcode-inline-container">
+        <qrcode :value="url" :options="{ width: 126 }" class="signature-qrcode"></qrcode>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+
+
+module.exports = {
+  name: 'QrCodeDisplay',
+  props: {
+    // 二维码内容
+    url: {
+      type: String,
+      required: true
+    },
+    // 显示模式：dialog（默认）或 inline
+    mode: {
+      type: String,
+      default: 'dialog',
+      validator: (value) => ['dialog', 'inline'].includes(value)
+    },
+    // 控制弹窗显示（可用于外部 v-model 控制）
+    value: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  data() {
+    return {
+      dialogVisible: this.value // 初始化为传入的 value
+    }
+  },
+
+  watch: {
+    // 同步 v-model 的 value 变化到 dialogVisible
+    value(newVal) {
+      this.dialogVisible = newVal
+    },
+    // 同步 dialogVisible 状态到外部（实现 v-model）
+    dialogVisible(newVal) {
+      this.$emit('input', newVal)
+    }
+  },
+
+  methods: {
+    openDialog() {
+      this.dialogVisible = true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.signature-qrcode {
+  display: inline-block;
+  margin: 0 auto;
+}
+
+.qrcode-container {
+  padding: 20px 0;
+}
+
+.qrcode-inline-container {
+  display: inline-block;
+  padding: 10px;
+  border: 1px dashed #ccc;
+  border-radius: 8px;
+}
+</style>