feat: barcode demo (#252)

locales/en.yaml

@@ -78,3 +78,4 @@ menus:
   hsListCard: Card List Page
   hsDebounce: Debounce & Throttle
   hsFormDesign: Form Design
+  hsBarcode: Barcode

locales/zh-CN.yaml

@@ -78,3 +78,4 @@ menus:
   hsListCard: 卡片列表页
   hsDebounce: 防抖节流
   hsFormDesign: 表单设计器
+  hsBarcode: 条形码

package.json

@@ -47,6 +47,7 @@
     "element-plus": "^2.1.10",
     "element-resize-detector": "^1.2.3",
     "js-cookie": "^3.0.1",
+    "jsbarcode": "^3.11.5",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "lodash-unified": "^1.0.2",

pnpm-lock.yaml

@@ -56,6 +56,7 @@ specifiers:
   font-awesome: ^4.7.0
   husky: ^7.0.4
   js-cookie: ^3.0.1
+  jsbarcode: ^3.11.5
   lint-staged: 11.1.2
   lodash: ^4.17.21
   lodash-es: ^4.17.21
@@ -129,6 +130,7 @@ dependencies:
   element-plus: 2.1.10_vue@3.2.33
   element-resize-detector: 1.2.4
   js-cookie: 3.0.1
+  jsbarcode: 3.11.5
   lodash: 4.17.21
   lodash-es: 4.17.21
   lodash-unified: 1.0.2_da03a4540fbd16bbaafbb96724306afd
@@ -5240,6 +5242,14 @@ packages:
       argparse: 2.0.1
     dev: true
 
+  /jsbarcode/3.11.5:
+    resolution:
+      {
+        integrity: sha512-zv3KsH51zD00I/LrFzFSM6dst7rDn0vIMzaiZFL7qusTjPZiPtxg3zxetp0RR7obmjTw4f6NyGgbdkBCgZUIrA==
+      }
+    hasBin: true
+    dev: false
+
   /jsesc/2.5.2:
     resolution:
       {

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>