新增条码元素的填充选项,支持无损填满外层容器的配置。更新相关渲染逻辑和接口,提升条码显示的灵活性和用户体验。

This commit is contained in:
geht
2026-05-13 14:06:13 +08:00
parent b6e468abfa
commit 210f3614ea
6 changed files with 221 additions and 69 deletions

View File

@@ -225,6 +225,13 @@
un-checked-children="隐藏条码下文字"
@update:checked="updateField('displayValue', $event)"
/>
<a-switch
style="margin-top: 8px"
:checked="(selectedElement as any).fillCell === true"
checked-children="条码填充整格"
un-checked-children="条码保持比例"
@update:checked="updateField('fillCell', $event)"
/>
<div
v-if="(selectedElement as any).displayValue !== false"
class="bind-param-compact"

View File

@@ -39,6 +39,7 @@
lineWidth: (props.element as any).lineWidth,
barHeight: (props.element as any).barHeight,
textAlign: (props.element as any).textAlign,
fillCell: (props.element as any).fillCell === true,
});
}
@@ -54,6 +55,7 @@
(props.element as any).lineWidth,
(props.element as any).barHeight,
(props.element as any).textAlign,
(props.element as any).fillCell,
],
renderBarcode,
);

View File

@@ -33,6 +33,12 @@ export interface NativeBarcodeOptions {
* + lengthAdjust=spacing由浏览器拉伸字符间距让文字横向铺满条码宽度。
*/
textAlign?: 'left' | 'center' | 'right' | 'justify';
/**
* 是否无损填满外层容器:
* - false默认preserveAspectRatio="xMidYMid meet",保比例居中。
* - truepreserveAspectRatio="none"SVG 按容器宽高 1:1 拉伸(矢量缩放无损)。
*/
fillCell?: boolean;
}
const SVG_NS = 'http://www.w3.org/2000/svg';
@@ -55,6 +61,7 @@ function resolveOptions(value: string, options: NativeBarcodeOptions | undefined
background: options?.background || '#ffffff',
textAlign: jsAlign,
justifyText: isJustify,
fillCell: !!options?.fillCell,
};
}
@@ -96,7 +103,10 @@ export async function renderNativeBarcodeIntoSvg(
}
svg.removeAttribute('width');
svg.removeAttribute('height');
svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
// fillCell=true 时preserveAspectRatio="none"SVG 矢量按容器宽高 1:1 拉伸铺满
//(条宽/条高比会跟着容器变,但因为是矢量,缩放本身不会失真);
// fillCell=false 时:默认 "xMidYMid meet" 保比例居中,扫码兼容性最佳。
svg.setAttribute('preserveAspectRatio', opts.fillCell ? 'none' : 'xMidYMid meet');
// 两端对齐:找到底部文字 <text>,让浏览器把字符间距自动拉伸到条码宽度
if (opts.displayValue && opts.justifyText) {
applyJustifyTextAlign(svg);

View File

@@ -558,6 +558,7 @@ export async function renderNativePrintHtml(schema: NativeTemplateSchema, data:
lineWidth: (item as any).lineWidth,
barHeight: (item as any).barHeight,
textAlign: (item as any).textAlign,
fillCell: (item as any).fillCell === true,
});
if (svgStr) {
// 让 SVG 100% 充满定位 divpreserveAspectRatio 在 SVG 内部已设为 xMidYMid meet

View File

@@ -73,6 +73,15 @@ export interface NativeImageElement extends NativeElementBase {
export interface NativeCodeElement extends NativeElementBase {
type: 'qrcode' | 'barcode';
value: string;
/**
* 是否无损铺满整个编辑框(条码):
* - false / undefined默认preserveAspectRatio="xMidYMid meet",保比例居中,
* 扁容器中上下会留白,但条宽比例严格 1:1扫码兼容性最佳。
* - truepreserveAspectRatio="none"SVG 矢量按容器宽高拉伸铺满;
* 放大缩小不会失真(仍是矢量),但条宽/条高比会随容器变化,
* 适合需要"卡片整格塞满"的小票/标签场景。
*/
fillCell?: boolean;
}
export interface NativeTableColumn {