@a2simcode/ui 0.0.46 → 0.0.48

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

@@ -0,0 +1,143 @@
+<template>
+  <div class="props-demo-container">
+    <h2>几何尺寸属性</h2>
+
+    <div class="demo-section">
+      <h3>scale - 整体缩放比例</h3>
+      <div class="demo-grid">
+        <div class="demo-item">
+          <p>scale: 1</p>
+          <j-barcode v-model="code" bcid="code128" :scale="1" :height="15" />
+        </div>
+        <div class="demo-item">
+          <p>scale: 2 (默认)</p>
+          <j-barcode v-model="code" bcid="code128" :scale="2" :height="15" />
+        </div>
+        <div class="demo-item">
+          <p>scale: 3</p>
+          <j-barcode v-model="code" bcid="code128" :scale="3" :height="15" />
+        </div>
+        <div class="demo-item">
+          <p>scale: 4</p>
+          <j-barcode v-model="code" bcid="code128" :scale="4" :height="15" />
+        </div>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>scaleX / scaleY - 水平和垂直缩放</h3>
+      <div class="demo-grid">
+        <div class="demo-item">
+          <p>scaleX: 2, scaleY: 1</p>
+          <j-barcode v-model="code" bcid="code128" :scale-x="2" :scale-y="1" :height="15" />
+        </div>
+        <div class="demo-item">
+          <p>scaleX: 1, scaleY: 3</p>
+          <j-barcode v-model="code" bcid="code128" :scale-x="1" :scale-y="3" :height="15" />
+        </div>
+        <div class="demo-item">
+          <p>scaleX: 3, scaleY: 2</p>
+          <j-barcode v-model="code" bcid="code128" :scale-x="3" :scale-y="2" :height="15" />
+        </div>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>height - 一维码高度</h3>
+      <div class="demo-grid">
+        <div class="demo-item">
+          <p>height: 10</p>
+          <j-barcode v-model="code" bcid="code128" :height="10" :scale="2" />
+        </div>
+        <div class="demo-item">
+          <p>height: 15 (默认)</p>
+          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" />
+        </div>
+        <div class="demo-item">
+          <p>height: 20</p>
+          <j-barcode v-model="code" bcid="code128" :height="20" :scale="2" />
+        </div>
+        <div class="demo-item">
+          <p>height: 30</p>
+          <j-barcode v-model="code" bcid="code128" :height="30" :scale="2" />
+        </div>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>rotate - 旋转角度</h3>
+      <div class="demo-grid">
+        <div class="demo-item">
+          <p>rotate: 'N' (正常，默认)</p>
+          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" rotate="N" />
+        </div>
+        <div class="demo-item">
+          <p>rotate: 'R' (右转90度)</p>
+          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" rotate="R" />
+        </div>
+        <div class="demo-item">
+          <p>rotate: 'L' (左转90度)</p>
+          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" rotate="L" />
+        </div>
+        <div class="demo-item">
+          <p>rotate: 'I' (倒置180度)</p>
+          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" rotate="I" />
+        </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: 20px;
+  color: #303133;
+  font-size: 18px;
+  border-left: 4px solid #409eff;
+  padding-left: 10px;
+}
+
+.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;
+  background-color: #f5f7fa;
+  border-radius: 4px;
+}
+</style>

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

@@ -0,0 +1,216 @@
+<template>
+  <div class="props-demo-container">
+    <h2>校验与逻辑属性</h2>
+
+    <div class="demo-section">
+      <h3>includecheck - 在文本中包含校验位</h3>
+      <div class="demo-grid">
+        <div class="demo-item">
+          <p>includecheck: false (默认)</p>
+          <j-barcode v-model="code39" bcid="code39" :height="15" :scale="2" :includecheck="false" />
+        </div>
+        <div class="demo-item">
+          <p>includecheck: true</p>
+          <j-barcode v-model="code39" bcid="code39" :height="15" :scale="2" :includecheck="true" />
+        </div>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>includecheckintext - 在文本中包含校验位（针对特定码制）</h3>
+      <div class="demo-grid">
+        <div class="demo-item">
+          <p>includecheckintext: false (默认)</p>
+          <j-barcode
+            v-model="ean13"
+            bcid="ean13"
+            :height="15"
+            :scale="2"
+            :includecheckintext="false"
+          />
+        </div>
+        <div class="demo-item">
+          <p>includecheckintext: true</p>
+          <j-barcode
+            v-model="ean13"
+            bcid="ean13"
+            :height="15"
+            :scale="2"
+            :includecheckintext="true"
+          />
+        </div>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>parse - 启用转义字符解析</h3>
+      <p class="section-desc">如 ^013 表示回车</p>
+      <div class="demo-grid">
+        <div class="demo-item">
+          <p>parse: false (默认)</p>
+          <j-barcode v-model="code128" bcid="code128" :height="15" :scale="2" :parse="false" />
+        </div>
+        <div class="demo-item">
+          <p>parse: true</p>
+          <j-barcode v-model="code128" bcid="code128" :height="15" :scale="2" :parse="true" />
+        </div>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>parsefnc - 启用功能字符解析</h3>
+      <p class="section-desc">常用于 GS1-128 的 FNC 字符</p>
+      <div class="demo-grid">
+        <div class="demo-item">
+          <p>parsefnc: false (默认)</p>
+          <j-barcode v-model="gs1128" bcid="gs1-128" :height="15" :scale="2" :parsefnc="false" />
+        </div>
+        <div class="demo-item">
+          <p>parsefnc: true</p>
+          <j-barcode v-model="gs1128" bcid="gs1-128" :height="15" :scale="2" :parsefnc="true" />
+        </div>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>guardwhitespace - 强制显示两侧静区</h3>
+      <p class="section-desc">保护空白区域</p>
+      <div class="demo-grid">
+        <div class="demo-item">
+          <p>guardwhitespace: false (默认)</p>
+          <j-barcode
+            v-model="code128"
+            bcid="code128"
+            :height="15"
+            :scale="2"
+            :guardwhitespace="false"
+            backgroundcolor="f0f0f0"
+          />
+        </div>
+        <div class="demo-item">
+          <p>guardwhitespace: true</p>
+          <j-barcode
+            v-model="code128"
+            bcid="code128"
+            :height="15"
+            :scale="2"
+            :guardwhitespace="true"
+            backgroundcolor="f0f0f0"
+          />
+        </div>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>guardwidth - 静区宽度</h3>
+      <div class="demo-grid">
+        <div class="demo-item">
+          <p>guardwidth: null (默认，自动)</p>
+          <j-barcode
+            v-model="code128"
+            bcid="code128"
+            :height="15"
+            :scale="2"
+            backgroundcolor="f0f0f0"
+          />
+        </div>
+        <div class="demo-item">
+          <p>guardwidth: 5</p>
+          <j-barcode
+            v-model="code128"
+            bcid="code128"
+            :height="15"
+            :scale="2"
+            :guardwidth="5"
+            backgroundcolor="f0f0f0"
+          />
+        </div>
+        <div class="demo-item">
+          <p>guardwidth: 10</p>
+          <j-barcode
+            v-model="code128"
+            bcid="code128"
+            :height="15"
+            :scale="2"
+            :guardwidth="10"
+            backgroundcolor="f0f0f0"
+          />
+        </div>
+        <div class="demo-item">
+          <p>guardwidth: 20</p>
+          <j-barcode
+            v-model="code128"
+            bcid="code128"
+            :height="15"
+            :scale="2"
+            :guardwidth="20"
+            backgroundcolor="f0f0f0"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const code39 = ref('CODE39')
+const ean13 = ref('1234567890128')
+const code128 = ref('1234567890')
+const gs1128 = ref('(01)12345678901231')
+</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;
+  background-color: #f5f7fa;
+  border-radius: 4px;
+}
+</style>

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

@@ -0,0 +1,199 @@
+<template>
+  <div class="props-demo-container">
+    <h2>专用条码参数</h2>
+
+    <div class="demo-section">
+      <h3>eclevel - QR码/Aztec 纠错等级</h3>
+      <div class="demo-grid">
+        <div class="demo-item">
+          <p>eclevel: 'L' (低，约7%纠错能力)</p>
+          <j-barcode v-model="qrCode" bcid="qrcode" :scale="3" eclevel="L" />
+        </div>
+        <div class="demo-item">
+          <p>eclevel: 'M' (中，默认，约15%纠错能力)</p>
+          <j-barcode v-model="qrCode" bcid="qrcode" :scale="3" eclevel="M" />
+        </div>
+        <div class="demo-item">
+          <p>eclevel: 'Q' (中高，约25%纠错能力)</p>
+          <j-barcode v-model="qrCode" bcid="qrcode" :scale="3" eclevel="Q" />
+        </div>
+        <div class="demo-item">
+          <p>eclevel: 'H' (高，约30%纠错能力)</p>
+          <j-barcode v-model="qrCode" bcid="qrcode" :scale="3" eclevel="H" />
+        </div>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>version - QR码强制版本</h3>
+      <p class="section-desc">版本范围：1-40，留空则自动选择</p>
+      <div class="demo-grid">
+        <div class="demo-item">
+          <p>version: '' (默认，自动)</p>
+          <j-barcode v-model="qrCode" bcid="qrcode" :scale="3" />
+        </div>
+        <div class="demo-item">
+          <p>version: 1</p>
+          <j-barcode v-model="qrCode" bcid="qrcode" :scale="3" :version="1" />
+        </div>
+        <div class="demo-item">
+          <p>version: 5</p>
+          <j-barcode v-model="qrCode" bcid="qrcode" :scale="3" :version="5" />
+        </div>
+        <div class="demo-item">
+          <p>version: 10</p>
+          <j-barcode v-model="qrCode" bcid="qrcode" :scale="3" :version="10" />
+        </div>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>format - Data Matrix 形状</h3>
+      <div class="demo-grid">
+        <div class="demo-item">
+          <p>format: '' (默认，自动选择)</p>
+          <j-barcode v-model="dataMatrix" bcid="datamatrix" :scale="3" />
+        </div>
+        <div class="demo-item">
+          <p>format: 'square' (正方形)</p>
+          <j-barcode v-model="dataMatrix" bcid="datamatrix" :scale="3" format="square" />
+        </div>
+        <div class="demo-item">
+          <p>format: 'rect' (矩形)</p>
+          <j-barcode v-model="dataMatrix" bcid="datamatrixrect" :scale="3" format="rect" />
+        </div>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>columns - PDF417 指定列数</h3>
+      <p class="section-desc">留空则自动选择</p>
+      <div class="demo-grid">
+        <div class="demo-item">
+          <p>columns: null (默认，自动)</p>
+          <j-barcode v-model="pdf417" bcid="pdf417" :scale="2" />
+        </div>
+        <div class="demo-item">
+          <p>columns: 5</p>
+          <j-barcode v-model="pdf417" bcid="pdf417" :scale="2" :columns="5" />
+        </div>
+        <div class="demo-item">
+          <p>columns: 10</p>
+          <j-barcode v-model="pdf417" bcid="pdf417" :scale="2" :columns="10" />
+        </div>
+        <div class="demo-item">
+          <p>columns: 20</p>
+          <j-barcode v-model="pdf417" bcid="pdf417" :scale="2" :columns="20" />
+        </div>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>rows - PDF417 指定行数</h3>
+      <p class="section-desc">留空则自动选择</p>
+      <div class="demo-grid">
+        <div class="demo-item">
+          <p>rows: null (默认，自动)</p>
+          <j-barcode v-model="pdf417" bcid="pdf417" :scale="2" />
+        </div>
+        <div class="demo-item">
+          <p>rows: 3</p>
+          <j-barcode v-model="pdf417" bcid="pdf417" :scale="2" :rows="3" />
+        </div>
+        <div class="demo-item">
+          <p>rows: 5</p>
+          <j-barcode v-model="pdf417" bcid="pdf417" :scale="2" :rows="5" />
+        </div>
+        <div class="demo-item">
+          <p>rows: 10</p>
+          <j-barcode v-model="pdf417" bcid="pdf417" :scale="2" :rows="10" />
+        </div>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>errorlevel - PDF417 纠错等级</h3>
+      <p class="section-desc">范围：0-8，留空则自动选择</p>
+      <div class="demo-grid">
+        <div class="demo-item">
+          <p>errorlevel: null (默认，自动)</p>
+          <j-barcode v-model="pdf417" bcid="pdf417" :scale="2" />
+        </div>
+        <div class="demo-item">
+          <p>errorlevel: 0</p>
+          <j-barcode v-model="pdf417" bcid="pdf417" :scale="2" :errorlevel="0" />
+        </div>
+        <div class="demo-item">
+          <p>errorlevel: 3</p>
+          <j-barcode v-model="pdf417" bcid="pdf417" :scale="2" :errorlevel="3" />
+        </div>
+        <div class="demo-item">
+          <p>errorlevel: 8</p>
+          <j-barcode v-model="pdf417" bcid="pdf417" :scale="2" :errorlevel="8" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const qrCode = ref('QR Code Demo')
+const dataMatrix = ref('DataMatrix Demo')
+const pdf417 = ref('PDF417 Demo Text')
+</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;
+  background-color: #f5f7fa;
+  border-radius: 4px;
+}
+</style>