【新增】完成temu标签组件

src/components/print/customProvider.js

@@ -1,6 +1,6 @@
 import { hiprint } from 'vue-plugin-hiprint'
 export const customProvider = function (options) {
-  var addElementTypes = function (context) {
+  const addElementTypes = function (context) {
     context.removePrintElementTypes('customProvider')
     context.addPrintElementTypes('customProvider', [
       new hiprint.PrintElementTypeGroup('', [
@@ -9,31 +9,48 @@ export const customProvider = function (options) {
           title: 'temu条码',
           data: 'XS888888888',
           type: 'html',
-          formatter: function (title, options, templateData) {
-            console.log(options, templateData)
-            var elId = 'barCode-' + new Date().getTime()
+          formatter: function (data, options, templateData, e, x, target) {
+            console.log(data, options, templateData)
+            const elId = options.elId || 'barCode-' + new Date().getTime()
+
             // eslint-disable-next-line no-undef
             $('body').append('<svg id="' + elId + '"></svg>')
-
             // eslint-disable-next-line no-undef
             JsBarcode('#'+ elId, '96778555251', {
               format: "CODE128B",
               width: 2,
-              height: options.height * 0.6 + 4,
+              height:  parseInt(hinnn.pt.toPx(options.height - 20).toString()) * 0.6 - 3,
               margin: 0,
               displayValue: false
             })
+            options.elId = `${elId}`
 
             // eslint-disable-next-line no-undef
             const codeHtml = $(`#${elId}`).html()
             // eslint-disable-next-line no-undef
             $(`#${elId}`).remove()
             // eslint-disable-next-line no-undef
-            $('document').on('resize', `#${elId}`, e => {
-              console.log(e)
-            });
+            const resizeObserver = new ResizeObserver(() => {
+              JsBarcode('#'+ elId, '96778555251', {
+                format: "CODE128B",
+                width: 2,
+                height:  parseInt(hinnn.pt.toPx(options.height - 20).toString()) * 0.6 - 3,
+                margin: 0,
+                displayValue: false
+              })
+
+              const codeWidth = $(`#temuBarCode-${elId} .temuBarCode-code`).width()
+              $(`#${elId}`).css('width', codeWidth + 'px')
+            })
+
+            setTimeout(() => {
+              const node = document.getElementById(`temuBarCode-${elId}`)
+              if (node) {
+                resizeObserver.observe(node)
+              }
+            }, 20)
             var html = `
-              <div class="temuBarCode">
+              <div class="temuBarCode" id="temuBarCode-${elId}">
                 <div class="temuBarCode-top">
                   <div class="hiprint-printElement-text-content hiprint-printElement-content">(AA+AAA)*20PCS</div>
                   <div class="hiprint-printElement-text-content hiprint-printElement-content">AA 20PCS+AAA 20PCS</div>
@@ -55,7 +72,8 @@ export const customProvider = function (options) {
           },
           options: {
             width: 316,
-            height: 120
+            height: 120,
+            elId: ''
           }
         },
         {
@@ -99,6 +117,6 @@ export const customProvider = function (options) {
     ])
   }
   return {
-    addElementTypes: addElementTypes
+    addElementTypes
   }
 }