feat: barcode demo (#252)

src/views/able/barcode.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import ReBarcode from "/@/components/ReBarcode";
+
+const barcodes = [
+  {
+    text: "CODE128",
+    type: "CODE128",
+    options: {}
+  },
+  {
+    text: "CODE39",
+    type: "CODE39",
+    options: {
+      lineColor: "#990000"
+    }
+  },
+  {
+    text: "123456",
+    type: "pharmacode",
+    options: {
+      background: "#eee",
+      width: 5
+    }
+  }
+];
+</script>
+
+<template>
+  <div>
+    <el-card>
+      <template #header>
+        <div class="font-medium">
+          条形码（基于<el-link
+            href="https://lindell.me/JsBarcode/"
+            target="_blank"
+            style="font-size: 16px; margin: 0 5px 4px 0"
+            >JsBarcode</el-link
+          >生成）
+        </div>
+      </template>
+      <el-row :gutter="12">
+        <template v-for="(item, index) in barcodes" :key="index">
+          <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
+            <el-card shadow="hover" class="flex justify-center">
+              <ReBarcode
+                :text="item.text"
+                :type="item.type"
+                :options="item.options"
+              />
+            </el-card>
+          </el-col>
+        </template>
+      </el-row>
+    </el-card>
+  </div>
+</template>