feat: barcode demo (#252)

src/components/ReBarcode/index.ts

@@ -0,0 +1,10 @@
+import { App } from "vue";
+import reBarcode from "./src/index.vue";
+
+export const ReBarcode = Object.assign(reBarcode, {
+  install(app: App) {
+    app.component(reBarcode.name, reBarcode);
+  }
+});
+
+export default ReBarcode;

src/components/ReBarcode/src/index.vue

@@ -0,0 +1,44 @@
+<script lang="ts">
+export default {
+  name: "ReBarcode"
+};
+</script>
+
+<script setup lang="ts">
+import JsBarcode from "jsbarcode";
+import { ref, onMounted } from "vue";
+
+const props = defineProps({
+  tag: {
+    type: String,
+    default: "canvas"
+  },
+  text: {
+    type: String,
+    default: null
+  },
+  // 完整配置 https://github.com/lindell/JsBarcode/wiki/Options
+  options: {
+    type: Object,
+    default() {
+      return {};
+    }
+  },
+  // type 相当于 options.format，如果 type 和 options.format 同时存在，type 值优先；
+  type: {
+    type: String,
+    default: "CODE128"
+  }
+});
+
+const wrapEl = ref(null);
+
+onMounted(() => {
+  const opt = { ...props.options, format: props.type };
+  JsBarcode(wrapEl.value, props.text, opt);
+});
+</script>
+
+<template>
+  <component :is="tag" ref="wrapEl" />
+</template>

src/components/ReCard/src/index.vue

@@ -1,3 +1,9 @@
+<script lang="ts">
+export default {
+  name: "ReCard"
+};
+</script>
+
 <script setup lang="ts">
 import { computed, PropType } from "vue";
 import shopIcon from "/@/assets/svg/shop.svg?component";

src/router/modules/able.ts

@@ -101,6 +101,15 @@ const ableRouter = {
         title: $t("menus.hsDebounce"),
         i18n: true
       }
+    },
+    {
+      path: "/able/barcode",
+      name: "reBarcode",
+      component: () => import("/@/views/able/barcode.vue"),
+      meta: {
+        title: $t("menus.hsBarcode"),
+        i18n: true
+      }
     }
   ]
 };

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>