唯一码图形对接以及退出登录

components/BarcodeGenerator.vue

@@ -0,0 +1,60 @@
+<!-- components/BarcodeGenerator.vue -->
+<template>
+  <div class="barcode-container">
+    <canvas v-if="type === 'canvas'" ref="barcodeRef"></canvas>
+    <svg v-else ref="barcodeRef"></svg>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, onMounted, defineProps, defineEmits } from 'vue';
+import JsBarcode from 'jsbarcode';
+
+// 定义Props（外部传参）
+const props = defineProps({
+  value: { // 条形码内容
+    type: String,
+    required: true
+  },
+  format: { // 条形码格式
+    type: String,
+    default: 'CODE128'
+  },
+  type: { // 渲染类型
+    type: String,
+    default: 'canvas',
+    validator: (val) => ['canvas', 'svg'].includes(val)
+  },
+  options: { // 自定义配置
+    type: Object,
+    default: () => ({
+      width: 2,
+      height: 100,
+      displayValue: true
+    })
+  }
+})
+
+// 定义DOM引用
+const barcodeRef = ref(null)
+
+// 生成条形码
+const generate = () => {
+  if (!barcodeRef.value) return
+  // 合并默认配置和外部配置
+  const finalOptions = { ...props.options, format: props.format }
+  // 清空Canvas（SVG无需清空）
+  if (props.type === 'canvas') {
+    const ctx = barcodeRef.value.getContext('2d')
+    ctx.clearRect(0, 0, barcodeRef.value.width, barcodeRef.value.height)
+  }
+  // 生成条形码
+  JsBarcode(barcodeRef.value, props.value, finalOptions)
+}
+
+// 挂载后初始化
+onMounted(generate)
+
+// 监听props变化，自动更新
+watch([() => props.value, () => props.format, () => props.options], generate, { deep: true })
+</script>