@boom_pk/lowcode-barcode-component
Version:
阿里低代码引擎条形码组件
172 lines (165 loc) • 8.55 kB
HTML
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>条形码组件演示</title><style>body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
margin: 0;
padding: 20px;
background-color: #f5f5f5;
}
.container {
max-width: 1200px;
margin: 0 auto;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.demo-section {
margin-bottom: 30px;
padding: 20px;
border: 1px solid #e0e0e0;
border-radius: 6px;
}
.demo-title {
margin-top: 0;
color: #333;
border-bottom: 2px solid #1890ff;
padding-bottom: 10px;
}
.controls {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin-bottom: 20px;
padding: 15px;
background: #f9f9f9;
border-radius: 4px;
}
.control-group {
display: flex;
flex-direction: column;
}
.control-group label {
margin-bottom: 5px;
font-weight: 500;
color: #555;
}
.control-group input, .control-group select {
padding: 8px;
border: 1px solid #d9d9d9;
border-radius: 4px;
font-size: 14px;
}
.control-group input:focus, .control-group select:focus {
outline: none;
border-color: #1890ff;
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}
.barcode-preview {
text-align: center;
padding: 20px;
background: white;
border: 2px dashed #d9d9d9;
border-radius: 4px;
}
.preset-buttons {
display: flex;
gap: 10px;
margin-bottom: 15px;
flex-wrap: wrap;
}
.preset-btn {
padding: 8px 16px;
background: #1890ff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s;
}
.preset-btn:hover {
background: #40a9ff;
}
.code-section {
margin-top: 20px;
padding: 15px;
background: #f6f8fa;
border-radius: 6px;
border-left: 4px solid #1890ff;
}
.code-section h4 {
margin-top: 0;
color: #333;
}
pre {
background: #f1f3f4;
padding: 15px;
border-radius: 4px;
overflow-x: auto;
font-size: 13px;
line-height: 1.5;
}</style><script defer="defer" src="barcode-component.min.js"></script></head><body><div class="container"><h1>条形码组件演示</h1><p>这是一个为阿里低代码引擎开发的条形码组件演示页面</p><div class="demo-section"><h2 class="demo-title">🎯 交互式演示</h2><div class="preset-buttons"><button class="preset-btn" onclick="setPreset('product')">商品条码</button> <button class="preset-btn" onclick="setPreset('book')">图书ISBN</button> <button class="preset-btn" onclick="setPreset('custom')">自定义内容</button> <button class="preset-btn" onclick="setPreset('ticket')">票务编号</button></div><div class="controls"><div class="control-group"><label for="barcodeValue">条形码内容</label> <input id="barcodeValue" value="SAMPLE123" oninput="updateBarcode()"></div><div class="control-group"><label for="barcodeFormat">条形码格式</label> <select id="barcodeFormat" onchange="updateBarcode()"><option value="CODE128">CODE128</option><option value="CODE39">CODE39</option><option value="EAN13">EAN13</option><option value="EAN8">EAN8</option><option value="UPC">UPC</option></select></div><div class="control-group"><label for="barcodeWidth">条宽度</label> <input type="range" id="barcodeWidth" min="1" max="5" step="0.5" value="2" oninput="updateBarcode()"></div><div class="control-group"><label for="barcodeHeight">条高度</label> <input type="range" id="barcodeHeight" min="50" max="200" value="100" oninput="updateBarcode()"></div><div class="control-group"><label for="fontSize">字体大小</label> <input type="range" id="fontSize" min="10" max="30" value="20" oninput="updateBarcode()"></div><div class="control-group"><label for="displayValue">显示文本</label> <input type="checkbox" id="displayValue" checked="checked" onchange="updateBarcode()"></div></div><div class="barcode-preview"><div id="barcodeContainer"></div></div></div><div class="demo-section"><h2 class="demo-title">📖 使用说明</h2><div class="code-section"><h4>1. 安装依赖</h4><pre><code>npm install jsbarcode</code></pre><h4>2. 在低代码引擎中注册组件</h4><pre><code>import { BarcodeComponent, BarcodeComponentMeta } from '@your-org/barcode-component';
// 注册组件
designer.registerComponent(BarcodeComponent, BarcodeComponentMeta);</code></pre><h4>3. 直接在React中使用</h4><pre><code>import BarcodeComponent from '@your-org/barcode-component';
function App() {
return (
<BarcodeComponent
value="HELLO123"
format="CODE128"
width={2}
height={100}
displayValue={true}
/>
);
}</code></pre></div></div><div class="demo-section"><h2 class="demo-title">🔧 支持的条形码格式</h2><ul><li><strong>CODE128</strong> - 通用编码，支持数字和字母</li><li><strong>CODE39</strong> - 工业标准，支持数字、字母和部分符号</li><li><strong>EAN13</strong> - 商品条码标准（13位）</li><li><strong>EAN8</strong> - 商品条码标准（8位）</li><li><strong>UPC</strong> - 美国商品条码标准</li></ul></div></div><script src="https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.11.5/JsBarcode.all.min.js"></script><script>function updateBarcode() {
const value = document.getElementById('barcodeValue').value;
const format = document.getElementById('barcodeFormat').value;
const width = parseFloat(document.getElementById('barcodeWidth').value);
const height = parseInt(document.getElementById('barcodeHeight').value);
const fontSize = parseInt(document.getElementById('fontSize').value);
const displayValue = document.getElementById('displayValue').checked;
const container = document.getElementById('barcodeContainer');
container.innerHTML = '<canvas id="barcodeCanvas"></canvas>';
if (value) {
try {
JsBarcode("#barcodeCanvas", value, {
format: format,
width: width,
height: height,
displayValue: displayValue,
fontSize: fontSize,
textAlign: "center",
textPosition: "bottom",
background: "#ffffff",
lineColor: "#000000",
margin: 10
});
} catch (error) {
container.innerHTML = '<p style="color: red;">条形码生成失败: ' + error.message + '</p>';
}
}
}
function setPreset(type) {
const valueInput = document.getElementById('barcodeValue');
const formatSelect = document.getElementById('barcodeFormat');
switch(type) {
case 'product':
valueInput.value = '1234567890123';
formatSelect.value = 'EAN13';
break;
case 'book':
valueInput.value = '9787115432011';
formatSelect.value = 'EAN13';
break;
case 'custom':
valueInput.value = 'HELLO-WORLD-123';
formatSelect.value = 'CODE128';
break;
case 'ticket':
valueInput.value = 'TK20250611001';
formatSelect.value = 'CODE39';
break;
}
updateBarcode();
}
// 初始化
updateBarcode();</script></body></html>