kubbo/temu-plugin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

【修复】模板内temu标签组件bug

Browse Source
This commit is contained in:
yanran200830
2024-10-22 15:11:28 +08:00
parent 432d4351d3
commit 28264e43b5
3 changed files with 18 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
public/css/print-lock.css
View File

@@ -376,3 +376,7 @@ table.hiprint-printElement-tableTarget {
width: 80%; width: 80%;
height: 60%; height: 60%;
} }
.temuBarCode-code svg {
width: 100%;
}

4
public/index.html
View File

@@ -25,6 +25,10 @@
height: 100%; height: 100%;
} }
.temuBarCode-code svg {
width: 100%;
}
.temuBarCode-top, .temuBarCode-top,
.temuBarCode-bottom { .temuBarCode-bottom {
display: flex; display: flex;

25
src/components/print/customProvider.js
View File

@@ -9,38 +9,35 @@ export const customProvider = function (options) {
title: 'temu条码', title: 'temu条码',
data: 'XS888888888', data: 'XS888888888',
type: 'html', type: 'html',
formatter: function (data, options, templateData, e, x, target) { formatter: function (data, options, templateData) {
console.log(data, options, templateData) console.log(data, options, templateData)
const elId = options.elId || 'barCode-' + new Date().getTime() const elId = options.elId || 'barCode-' + new Date().getTime()
const codeWidth = parseInt((options.width - 22) * 0.85)
// eslint-disable-next-line no-undef // eslint-disable-next-line no-undef
$('body').append('<svg id="' + elId + '"></svg>') $('body').append(`<div id="codewrapper-${elId}" style="width: ${codeWidth}pt"><svg id="${elId}" width="100%" display="block" height="100%" class="hibarcode_imgcode" preserveAspectRatio="none slice"></svg></div>`)
// eslint-disable-next-line no-undef // eslint-disable-next-line no-undef
JsBarcode('#'+ elId, '96778555251', { JsBarcode('#'+ elId, '96778555251', {
format: "CODE128B", format: "CODE128B",
width: 2, width: 2,
height: parseInt(hinnn.pt.toPx(options.height - 20).toString()) * 0.6 - 3, height: parseInt(hinnn.pt.toPx(options.height - 22).toString()) * 0.6,
margin: 0, margin: 0,
displayValue: false displayValue: false
}) })
options.elId = `${elId}` options.elId = `${elId}`
// eslint-disable-next-line no-undef // eslint-disable-next-line no-undef
const codeHtml = $(`#${elId}`).html() const codeHtml = $(`#codewrapper-${elId}`).html()
// eslint-disable-next-line no-undef // eslint-disable-next-line no-undef
$(`#${elId}`).remove() $(`body>#codewrapper-${elId}`).remove()
// eslint-disable-next-line no-undef // eslint-disable-next-line no-undef
const resizeObserver = new ResizeObserver(() => { const resizeObserver = new ResizeObserver(() => {
JsBarcode('#'+ elId, '96778555251', { JsBarcode('#'+ elId, '96778555251', {
format: "CODE128B", format: "CODE128B",
width: 2, width: 2,
height: parseInt(hinnn.pt.toPx(options.height - 20).toString()) * 0.6 - 3, height: parseInt(hinnn.pt.toPx(options.height - 22).toString()) * 0.6,
margin: 0, margin: 0,
displayValue: false displayValue: false
}) })
const codeWidth = $(`#temuBarCode-${elId} .temuBarCode-code`).width()
$(`#${elId}`).css('width', codeWidth + 'px')
}) })
setTimeout(() => { setTimeout(() => {
@@ -48,7 +45,7 @@ export const customProvider = function (options) {
if (node) { if (node) {
resizeObserver.observe(node) resizeObserver.observe(node)
} }
}, 20) }, 0)
var html = ` var html = `
<div class="temuBarCode" id="temuBarCode-${elId}"> <div class="temuBarCode" id="temuBarCode-${elId}">
<div class="temuBarCode-top"> <div class="temuBarCode-top">
@@ -56,10 +53,8 @@ export const customProvider = function (options) {
<div class="hiprint-printElement-text-content hiprint-printElement-content">AA 20PCS+AAA 20PCS</div> <div class="hiprint-printElement-text-content hiprint-printElement-content">AA 20PCS+AAA 20PCS</div>
</div> </div>
<div class="temuBarCode-middle"> <div class="temuBarCode-middle">
<div class="hiprint-printElement-text-content hiprint-printElement-content temuBarCode-code"> <div class="hiprint-printElement-text-content hiprint-printElement-content temuBarCode-code" style="width: 100%">
<svg id="${elId}" style="display: block" width="100%" display="block" height="100%" class="hibarcode_imgcode" preserveAspectRatio="none slice"> ${codeHtml}
${codeHtml}
</svg>
</div> </div>
</div> </div>
<div class="temuBarCode-bottom"> <div class="temuBarCode-bottom">