@a2simcode/ui 0.0.45 → 0.0.47

package/docs/examples/barcode/all-types.vue

@@ -0,0 +1,380 @@
+<template>
+  <div class="barcode-types-container">
+    <h2>所有支持的条码类型</h2>
+
+    <!-- 常用零售条码 -->
+    <section class="barcode-section">
+      <h3>常用零售条码</h3>
+      <div class="barcode-grid">
+        <div class="barcode-item">
+          <h4>EAN-13</h4>
+          <j-barcode v-model="codes.ean13" bcid="ean13" :height="15" :scale="2" />
+          <p class="desc">国际商品条码，13位数字</p>
+          <p class="code">值: {{ codes.ean13 }}</p>
+        </div>
+
+        <div class="barcode-item">
+          <h4>EAN-8</h4>
+          <j-barcode v-model="codes.ean8" bcid="ean8" :height="15" :scale="2" />
+          <p class="desc">缩短版国际商品条码，8位数字</p>
+          <p class="code">值: {{ codes.ean8 }}</p>
+        </div>
+
+        <div class="barcode-item">
+          <h4>UPC-A</h4>
+          <j-barcode v-model="codes.upca" bcid="upca" :height="15" :scale="2" />
+          <p class="desc">美国产品编码，12位数字</p>
+          <p class="code">值: {{ codes.upca }}</p>
+        </div>
+
+        <div class="barcode-item">
+          <h4>UPC-E</h4>
+          <j-barcode v-model="codes.upce" bcid="upce" :height="15" :scale="2" />
+          <p class="desc">UPC压缩版，6位数字</p>
+          <p class="code">值: {{ codes.upce }}</p>
+        </div>
+
+        <div class="barcode-item">
+          <h4>ITF-14</h4>
+          <j-barcode v-model="codes.itf14" bcid="itf14" :height="15" :scale="2" />
+          <p class="desc">运输包装条码，14位数字</p>
+          <p class="code">值: {{ codes.itf14 }}</p>
+        </div>
+
+        <div class="barcode-item">
+          <h4>GS1-128</h4>
+          <j-barcode v-model="codes.gs1128" bcid="gs1-128" :height="15" :scale="2" />
+          <p class="desc">GS1应用标识符条码</p>
+          <p class="code">值: {{ codes.gs1128 }}</p>
+        </div>
+      </div>
+    </section>
+
+    <!-- 通用一维码 -->
+    <section class="barcode-section">
+      <h3>通用一维码</h3>
+      <div class="barcode-grid">
+        <div class="barcode-item">
+          <h4>CODE128</h4>
+          <j-barcode v-model="codes.code128" bcid="code128" :height="15" :scale="2" />
+          <p class="desc">通用格式，支持ASCII字符</p>
+          <p class="code">值: {{ codes.code128 }}</p>
+        </div>
+
+        <div class="barcode-item">
+          <h4>CODE39</h4>
+          <j-barcode v-model="codes.code39" bcid="code39" :height="15" :scale="2" />
+          <p class="desc">支持字母、数字和特殊字符</p>
+          <p class="code">值: {{ codes.code39 }}</p>
+        </div>
+
+        <div class="barcode-item">
+          <h4>CODE39扩展</h4>
+          <j-barcode v-model="codes.code39ext" bcid="code39ext" :height="15" :scale="2" />
+          <p class="desc">CODE39扩展版，支持更多字符</p>
+          <p class="code">值: {{ codes.code39ext }}</p>
+        </div>
+
+        <div class="barcode-item">
+          <h4>CODE93</h4>
+          <j-barcode v-model="codes.code93" bcid="code93" :height="15" :scale="2" />
+          <p class="desc">高密度条码，支持ASCII字符</p>
+          <p class="code">值: {{ codes.code93 }}</p>
+        </div>
+
+        <div class="barcode-item">
+          <h4>CODE93扩展</h4>
+          <j-barcode v-model="codes.code93ext" bcid="code93ext" :height="15" :scale="2" />
+          <p class="desc">CODE93扩展版</p>
+          <p class="code">值: {{ codes.code93ext }}</p>
+        </div>
+
+        <div class="barcode-item">
+          <h4>Interleaved 2 of 5</h4>
+          <j-barcode v-model="codes.i2of5" bcid="interleaved2of5" :height="15" :scale="2" />
+          <p class="desc">交叉二五码，仅支持数字</p>
+          <p class="code">值: {{ codes.i2of5 }}</p>
+        </div>
+
+        <div class="barcode-item">
+          <h4>Codabar</h4>
+          <j-barcode v-model="codes.codabar" bcid="codabar" :height="15" :scale="2" />
+          <p class="desc">库德巴码，支持数字和字母ABCD</p>
+          <p class="code">值: {{ codes.codabar }}</p>
+        </div>
+
+        <div class="barcode-item">
+          <h4>MSI</h4>
+          <j-barcode v-model="codes.msi" bcid="msi" :height="15" :scale="2" />
+          <p class="desc">MSI条码，仅支持数字</p>
+          <p class="code">值: {{ codes.msi }}</p>
+        </div>
+      </div>
+    </section>
+
+    <!-- 二维码 -->
+    <section class="barcode-section">
+      <h3>二维码</h3>
+      <div class="barcode-grid">
+        <div class="barcode-item">
+          <h4>QR Code</h4>
+          <j-barcode v-model="codes.qrcode" bcid="qrcode" :scale="3" />
+          <p class="desc">快速响应码，支持大量数据存储</p>
+          <p class="code">值: {{ codes.qrcode }}</p>
+        </div>
+
+        <div class="barcode-item">
+          <h4>Micro QR Code</h4>
+          <j-barcode v-model="codes.microqrcode" bcid="microqrcode" :scale="3" />
+          <p class="desc">微型QR码，适用于小空间</p>
+          <p class="code">值: {{ codes.microqrcode }}</p>
+        </div>
+
+        <div class="barcode-item">
+          <h4>Data Matrix</h4>
+          <j-barcode v-model="codes.datamatrix" bcid="datamatrix" :scale="3" />
+          <p class="desc">矩阵式二维码，适用于小空间标识</p>
+          <p class="code">值: {{ codes.datamatrix }}</p>
+        </div>
+
+        <div class="barcode-item">
+          <h4>Data Matrix Rectangular</h4>
+          <j-barcode v-model="codes.datamatrixrect" bcid="datamatrixrect" :scale="3" />
+          <p class="desc">矩形Data Matrix</p>
+          <p class="code">值: {{ codes.datamatrixrect }}</p>
+        </div>
+
+        <div class="barcode-item">
+          <h4>PDF417</h4>
+          <j-barcode v-model="codes.pdf417" bcid="pdf417" :scale="2" />
+          <p class="desc">堆叠式二维码，支持大量数据</p>
+          <p class="code">值: {{ codes.pdf417 }}</p>
+        </div>
+
+        <div class="barcode-item">
+          <h4>Micro PDF417</h4>
+          <j-barcode v-model="codes.micropdf417" bcid="micropdf417" :scale="2" />
+          <p class="desc">微型PDF417</p>
+          <p class="code">值: {{ codes.micropdf417 }}</p>
+        </div>
+
+        <div class="barcode-item">
+          <h4>Aztec Code</h4>
+          <j-barcode v-model="codes.azteccode" bcid="azteccode" :scale="3" />
+          <p class="desc">阿兹特克码，高密度二维码</p>
+          <p class="code">值: {{ codes.azteccode }}</p>
+        </div>
+
+        <div class="barcode-item">
+          <h4>Hanxin</h4>
+          <j-barcode v-model="codes.hanxin" bcid="hanxin" :scale="3" />
+          <p class="desc">汉信码，中国标准二维码</p>
+          <p class="code">值: {{ codes.hanxin }}</p>
+        </div>
+      </div>
+    </section>
+
+    <!-- 邮政编码 -->
+    <section class="barcode-section">
+      <h3>邮政编码</h3>
+      <div class="barcode-grid">
+        <div class="barcode-item">
+          <h4>USPS OneCode</h4>
+          <j-barcode v-model="codes.uspsonecode" bcid="uspsonecode" :height="15" :scale="2" />
+          <p class="desc">美国邮政服务条码</p>
+          <p class="code">值: {{ codes.uspsonecode }}</p>
+        </div>
+
+        <div class="barcode-item">
+          <h4>POSTNET</h4>
+          <j-barcode v-model="codes.postnet" bcid="postnet" :height="15" :scale="2" />
+          <p class="desc">美国邮政编码条码</p>
+          <p class="code">值: {{ codes.postnet }}</p>
+        </div>
+
+        <div class="barcode-item">
+          <h4>PLANET</h4>
+          <j-barcode v-model="codes.planet" bcid="planet" :height="15" :scale="2" />
+          <p class="desc">美国邮政服务PLANET条码</p>
+          <p class="code">值: {{ codes.planet }}</p>
+        </div>
+
+        <div class="barcode-item">
+          <h4>Royal Mail</h4>
+          <j-barcode v-model="codes.royalmail" bcid="royalmail" :height="15" :scale="2" />
+          <p class="desc">英国皇家邮政条码</p>
+          <p class="code">值: {{ codes.royalmail }}</p>
+        </div>
+
+        <div class="barcode-item">
+          <h4>Japan Post</h4>
+          <j-barcode v-model="codes.japanpost" bcid="japanpost" :height="15" :scale="2" />
+          <p class="desc">日本邮政条码</p>
+          <p class="code">值: {{ codes.japanpost }}</p>
+        </div>
+
+        <div class="barcode-item">
+          <h4>AUSPOST</h4>
+          <j-barcode v-model="codes.auspost" bcid="auspost" :height="15" :scale="2" />
+          <p class="desc">澳大利亚邮政条码</p>
+          <p class="code">值: {{ codes.auspost }}</p>
+        </div>
+      </div>
+    </section>
+
+    <!-- 医药行业 -->
+    <section class="barcode-section">
+      <h3>医药行业条码</h3>
+      <div class="barcode-grid">
+        <div class="barcode-item">
+          <h4>Pharmacode</h4>
+          <j-barcode v-model="codes.pharmacode" bcid="pharmacode" :height="15" :scale="2" />
+          <p class="desc">药用条码，仅支持数字，范围1-131070</p>
+          <p class="code">值: {{ codes.pharmacode }}</p>
+        </div>
+
+        <div class="barcode-item">
+          <h4>CODE32</h4>
+          <j-barcode v-model="codes.code32" bcid="code32" :height="15" :scale="2" />
+          <p class="desc">意大利医药条码</p>
+          <p class="code">值: {{ codes.code32 }}</p>
+        </div>
+
+        <div class="barcode-item">
+          <h4>HIBCCode128</h4>
+          <j-barcode v-model="codes.hibccode128" bcid="hibccode128" :height="15" :scale="2" />
+          <p class="desc">医疗设备标识条码</p>
+          <p class="code">值: {{ codes.hibccode128 }}</p>
+        </div>
+
+        <div class="barcode-item">
+          <h4>PZN</h4>
+          <j-barcode v-model="codes.pzn" bcid="pzn" :height="15" :scale="2" />
+          <p class="desc">德国医药产品编号</p>
+          <p class="code">值: {{ codes.pzn }}</p>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const codes = {
+  // 常用零售
+  ean13: '1234567890128',
+  ean8: '12345670',
+  upca: '123456789012',
+  upce: '01234565',
+  itf14: '12345678901231',
+  gs1128: '(01)12345678901231',
+
+  // 通用一维码
+  code128: 'ABC123456',
+  code39: 'CODE39',
+  code39ext: 'Code39Ext!',
+  code93: 'CODE93',
+  code93ext: 'Code93Ext!',
+  i2of5: '12345678',
+  codabar: 'A1234567890A',
+  msi: '123456',
+
+  // 二维码
+  qrcode: 'QR Code Demo Text',
+  microqrcode: 'MicroQR',
+  datamatrix: 'DataMatrix Demo',
+  datamatrixrect: 'DataMatrix Rect',
+  pdf417: 'PDF417 Demo Text',
+  micropdf417: 'MicroPDF417',
+  azteccode: 'Aztec Code Demo',
+  hanxin: '汉信码演示',
+
+  // 邮政编码
+  uspsonecode: '12345678901234567890',
+  postnet: '12345',
+  planet: '12345678901',
+  royalmail: 'A12345678GB',
+  japanpost: '12345678',
+  auspost: '6212345678901234567890123',
+
+  // 医药行业
+  pharmacode: '12345',
+  code32: '12345678',
+  hibccode128: '+H123PARTNO123',
+  pzn: '1234562',
+}
+</script>
+
+<style scoped>
+.barcode-types-container {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.barcode-section {
+  margin-bottom: 50px;
+}
+
+.barcode-section h3 {
+  border-bottom: 3px solid #409eff;
+  padding-bottom: 10px;
+  margin-bottom: 25px;
+  color: #303133;
+  font-size: 20px;
+}
+
+.barcode-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 20px;
+}
+
+.barcode-item {
+  padding: 20px;
+  border: 1px solid #e4e7ed;
+  border-radius: 8px;
+  background-color: #ffffff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  transition: box-shadow 0.3s;
+}
+
+.barcode-item:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.barcode-item h4 {
+  margin: 0 0 15px 0;
+  color: #303133;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.barcode-item :deep(.j-barcode) {
+  display: flex;
+  justify-content: center;
+  margin: 15px 0;
+  padding: 10px;
+  background-color: #f5f7fa;
+  border-radius: 4px;
+}
+
+.desc {
+  margin: 10px 0 5px 0;
+  font-size: 13px;
+  color: #606266;
+  line-height: 1.5;
+}
+
+.code {
+  margin: 5px 0 0 0;
+  font-size: 12px;
+  color: #909399;
+  word-break: break-all;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  background-color: #f5f7fa;
+  padding: 4px 8px;
+  border-radius: 3px;
+}
+</style>

package/docs/examples/barcode/basic.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <j-barcode v-model="barcode" :height="15" :scale="2" bcid="code128" />
+    <div style="margin-top: 20px">
+      <el-input v-model="barcode" placeholder="请输入条码值" style="width: 300px" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const barcode = ref('1234567890')
+</script>

package/docs/examples/barcode/props-appearance.vue

@@ -0,0 +1,243 @@
+<template>
+  <div class="props-demo-container">
+    <h2>颜色与外观属性</h2>
+
+    <div class="demo-section">
+      <h3>barcolor - 条码前景色</h3>
+      <div class="demo-grid">
+        <div class="demo-item">
+          <p>barcolor: '000000' (黑色，默认)</p>
+          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" barcolor="000000" />
+        </div>
+        <div class="demo-item">
+          <p>barcolor: 'ff0000' (红色)</p>
+          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" barcolor="ff0000" />
+        </div>
+        <div class="demo-item">
+          <p>barcolor: '0066cc' (蓝色)</p>
+          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" barcolor="0066cc" />
+        </div>
+        <div class="demo-item">
+          <p>barcolor: '00aa00' (绿色)</p>
+          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" barcolor="00aa00" />
+        </div>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>backgroundcolor - 背景色</h3>
+      <div class="demo-grid">
+        <div class="demo-item">
+          <p>backgroundcolor: '' (透明，默认)</p>
+          <div
+            style="
+              background:
+                linear-gradient(45deg, #f0f0f0 25%, transparent 25%),
+                linear-gradient(-45deg, #f0f0f0 25%, transparent 25%),
+                linear-gradient(45deg, transparent 75%, #f0f0f0 75%),
+                linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
+              background-size: 20px 20px;
+              background-position:
+                0 0,
+                0 10px,
+                10px -10px,
+                -10px 0px;
+              padding: 10px;
+              border-radius: 4px;
+            "
+          >
+            <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" />
+          </div>
+        </div>
+        <div class="demo-item">
+          <p>backgroundcolor: 'f0f0f0' (浅灰)</p>
+          <j-barcode
+            v-model="code"
+            bcid="code128"
+            :height="15"
+            :scale="2"
+            backgroundcolor="f0f0f0"
+          />
+        </div>
+        <div class="demo-item">
+          <p>backgroundcolor: 'ffffcc' (浅黄)</p>
+          <j-barcode
+            v-model="code"
+            bcid="code128"
+            :height="15"
+            :scale="2"
+            backgroundcolor="ffffcc"
+          />
+        </div>
+        <div class="demo-item">
+          <p>backgroundcolor: 'e6f3ff' (浅蓝)</p>
+          <j-barcode
+            v-model="code"
+            bcid="code128"
+            :height="15"
+            :scale="2"
+            backgroundcolor="e6f3ff"
+          />
+        </div>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>padding - 内边距</h3>
+      <div class="demo-grid">
+        <div class="demo-item">
+          <p>padding: 0 (默认)</p>
+          <j-barcode
+            v-model="code"
+            bcid="code128"
+            :height="15"
+            :scale="2"
+            :padding="0"
+            backgroundcolor="f0f0f0"
+          />
+        </div>
+        <div class="demo-item">
+          <p>padding: 5</p>
+          <j-barcode
+            v-model="code"
+            bcid="code128"
+            :height="15"
+            :scale="2"
+            :padding="5"
+            backgroundcolor="f0f0f0"
+          />
+        </div>
+        <div class="demo-item">
+          <p>padding: 10</p>
+          <j-barcode
+            v-model="code"
+            bcid="code128"
+            :height="15"
+            :scale="2"
+            :padding="10"
+            backgroundcolor="f0f0f0"
+          />
+        </div>
+        <div class="demo-item">
+          <p>padding: 20</p>
+          <j-barcode
+            v-model="code"
+            bcid="code128"
+            :height="15"
+            :scale="2"
+            :padding="20"
+            backgroundcolor="f0f0f0"
+          />
+        </div>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>paddingwidth / paddingheight - 左右/上下内边距</h3>
+      <div class="demo-grid">
+        <div class="demo-item">
+          <p>paddingwidth: 10, paddingheight: 5</p>
+          <j-barcode
+            v-model="code"
+            bcid="code128"
+            :height="15"
+            :scale="2"
+            :paddingwidth="10"
+            :paddingheight="5"
+            backgroundcolor="f0f0f0"
+          />
+        </div>
+        <div class="demo-item">
+          <p>paddingwidth: 20, paddingheight: 10</p>
+          <j-barcode
+            v-model="code"
+            bcid="code128"
+            :height="15"
+            :scale="2"
+            :paddingwidth="20"
+            :paddingheight="10"
+            backgroundcolor="f0f0f0"
+          />
+        </div>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>inkspread - 油墨扩散补偿</h3>
+      <p class="section-desc">负值使条纹变细，适合热敏打印</p>
+      <div class="demo-grid">
+        <div class="demo-item">
+          <p>inkspread: 0 (默认)</p>
+          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" :inkspread="0" />
+        </div>
+        <div class="demo-item">
+          <p>inkspread: -0.5</p>
+          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" :inkspread="-0.5" />
+        </div>
+        <div class="demo-item">
+          <p>inkspread: -1</p>
+          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" :inkspread="-1" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const code = ref('1234567890')
+</script>
+
+<style scoped>
+.props-demo-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.demo-section {
+  margin-bottom: 40px;
+}
+
+.demo-section h3 {
+  margin-bottom: 10px;
+  color: #303133;
+  font-size: 18px;
+  border-left: 4px solid #409eff;
+  padding-left: 10px;
+}
+
+.section-desc {
+  margin-bottom: 20px;
+  color: #909399;
+  font-size: 13px;
+}
+
+.demo-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 20px;
+}
+
+.demo-item {
+  padding: 15px;
+  border: 1px solid #e4e7ed;
+  border-radius: 6px;
+  background-color: #ffffff;
+}
+
+.demo-item p {
+  margin: 0 0 10px 0;
+  font-size: 13px;
+  color: #606266;
+  font-weight: 500;
+}
+
+.demo-item :deep(.j-barcode) {
+  display: flex;
+  justify-content: center;
+  padding: 10px;
+  border-radius: 4px;
+}
+</style>