ACS

2025-07-15 18:02:29 +08:00
parent 2038ddc617
commit d636050aac
65 changed files with 17885 additions and 103 deletions
@@ -0,0 +1,102 @@
+<template>
+  <div class="qrcode-container">
+    <canvas ref="qrcodeCanvas"></canvas>
+    <div v-if="!text" class="qrcode-placeholder">请提供文本以生成二维码</div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue'
+import QRCode from 'qrcode'
+
+const props = defineProps({
+  text: {
+    type: String,
+    required: true,
+    default: ''
+  },
+  size: {
+    type: Number,
+    default: 128
+  },
+  options: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const qrcodeCanvas = ref(null)
+
+const generateQRCode = async () => {
+  if (!props.text || !qrcodeCanvas.value) {
+    // 如果没有文本或者canvas未准备好，则清空canvas
+    const ctx = qrcodeCanvas.value?.getContext('2d');
+    if (ctx) {
+      ctx.clearRect(0, 0, qrcodeCanvas.value.width, qrcodeCanvas.value.height);
+    }
+    return;
+  }
+
+  try {
+    const defaultOptions = {
+      width: props.size,
+      height: props.size,
+      margin: 2,
+      color: {
+        dark: '#000000',
+        light: '#ffffff'
+      },
+      errorCorrectionLevel: 'M' // 容错级别 L M Q H
+    };
+    
+    const finalOptions = { ...defaultOptions, ...props.options };
+
+    await QRCode.toCanvas(qrcodeCanvas.value, props.text, finalOptions);
+  } catch (err) {
+    console.error('生成二维码失败:', err);
+  }
+}
+
+onMounted(() => {
+  generateQRCode()
+})
+
+watch(() => [props.text, props.size, props.options], () => {
+  generateQRCode()
+}, { deep: true })
+
+</script>
+
+<style scoped>
+.qrcode-container {
+  display: inline-flex; /* 使容器适应内容大小 */
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  border: 1px solid #eee;
+  border-radius: 4px;
+  padding: 8px;
+  background-color: #fff;
+}
+
+canvas {
+  display: block; /* 移除canvas默认的底部空间 */
+}
+
+.qrcode-placeholder {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 12px;
+  color: #999;
+  text-align: center;
+  padding: 10px;
+  box-sizing: border-box;
+  background-color: rgba(255, 255, 255, 0.8);
+}
+</style>