|
@@ -643,8 +643,15 @@ export default {
|
|
|
(option) => option.value === this.qrCodeSelectedSize
|
|
|
);
|
|
|
|
|
|
- // 使用对应尺寸的 qrSize
|
|
|
- new QRCode(element, {
|
|
|
+ // 创建一个容器来包裹二维码和文字
|
|
|
+ const container = document.createElement('div');
|
|
|
+ container.style.position = 'relative';
|
|
|
+ container.style.width = `${selectedSize.qrSize}px`;
|
|
|
+ container.style.height = `${selectedSize.qrSize}px`;
|
|
|
+ element.appendChild(container);
|
|
|
+
|
|
|
+ // 生成二维码
|
|
|
+ new QRCode(container, {
|
|
|
text: code,
|
|
|
width: selectedSize.qrSize,
|
|
|
height: selectedSize.qrSize,
|
|
@@ -652,6 +659,31 @@ export default {
|
|
|
colorLight: "#ffffff",
|
|
|
correctLevel: QRCode.CorrectLevel.H
|
|
|
});
|
|
|
+
|
|
|
+ // 创建文字层
|
|
|
+ const textOverlay = document.createElement('div');
|
|
|
+ textOverlay.style.position = 'absolute';
|
|
|
+ textOverlay.style.top = '50%';
|
|
|
+ textOverlay.style.left = '50%';
|
|
|
+ textOverlay.style.transform = 'translate(-50%, -50%)';
|
|
|
+ textOverlay.style.backgroundColor = 'white';
|
|
|
+ textOverlay.style.padding = '2px 2px';
|
|
|
+ textOverlay.style.fontSize = `${selectedSize.qrSize * 0.1}px`; // 文字大小随二维码大小变化
|
|
|
+ textOverlay.style.textAlign='center'
|
|
|
+ textOverlay.style.fontWeight = 'bold';
|
|
|
+ textOverlay.textContent = "SKU";
|
|
|
+ container.appendChild(textOverlay);
|
|
|
+
|
|
|
+ // 在二维码图片加载完成后调整文字背景大小
|
|
|
+ const qrImage = container.querySelector('img');
|
|
|
+ if (qrImage) {
|
|
|
+ qrImage.onload = () => {
|
|
|
+ const textWidth = textOverlay.offsetWidth;
|
|
|
+ const textHeight = textOverlay.offsetHeight;
|
|
|
+ /* textOverlay.style.width = `${textWidth + 10}px`; // 添加一些内边距
|
|
|
+ textOverlay.style.height = `${textHeight + 4}px`; */
|
|
|
+ };
|
|
|
+ }
|
|
|
}
|
|
|
});
|
|
|
},
|
|
@@ -745,7 +777,7 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
|
|
|
- // ��改获取条码配置的方法
|
|
|
+ // 修改获取条码配置的方法
|
|
|
getBarcodeOptions() {
|
|
|
const sizeConfig = {
|
|
|
large: { width: 1.5, height: 40 },
|
|
@@ -1285,4 +1317,22 @@ export default {
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.qrcode-container {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+@media print {
|
|
|
+ .qrcode-container {
|
|
|
+ page-break-inside: avoid;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 确保文字层在打印时也能正确显示 */
|
|
|
+ .qrcode-container > div {
|
|
|
+ position: relative !important;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|