Browse Source

解决二维码初始化大小问题

zhoucg 1 year ago
parent
commit
7006410009
2 changed files with 15 additions and 15 deletions
  1. 2 2
      src/components/config/globalConfig.ts
  2. 13 13
      src/components/yvan-ui/YvanPrintBarcode.vue

+ 2 - 2
src/components/config/globalConfig.ts

@@ -311,7 +311,7 @@ export const elementList = [
             borderColor: '#212121',
             borderRadius: 0,
             width: 100,
-            height: 30,
+            height: 65,
             background: '#fff',
             rotate: 0
         },
@@ -439,4 +439,4 @@ export const componentList = [
 export {
     tableConfigTemplate,
     tableInnerElementCodes
-}
+}

+ 13 - 13
src/components/yvan-ui/YvanPrintBarcode.vue

@@ -1,5 +1,5 @@
 <template>
-  <svg id="barcode" :width="computeWidth" :height="computeHeight"/>
+  <svg id="barcode" :style="computeStyle"/>
 </template>
 
 <script>
@@ -26,29 +26,29 @@ export default {
     }
   },
   data() {
-    return {}
+    return {
+      barcodeWidth: this.style.width + 'px',
+      barcodeHeight: this.style.height + 'px',
+    }
   },
   mounted() {
     this.createBarcode(this.config)
+    this.$nextTick(() => {
+      const barcode = document.getElementById('barcode');
+      barcode.style.width = `${this.style.width}px`;
+      barcode.style.height = `${this.style.height}px`;
+    })
   },
   computed: {
-    computeWidth(){
-      return `${this.style.width}px`;
-    },
-    computeHeight(){
-      return `${this.style.height}px`;
+    computeStyle() {
+      return `width: ${this.style.width}px; height: ${this.style.height}px;`
     }
   },
   methods: {
     createBarcode(config) {
       JsBarcode("#barcode", this.value, {
         ...config,
-        // height: this.style.height
       });
-      // const barcodeWidth = this.style.width;
-      // this.$nextTick(() => {
-      //   this.style.width = barcodeWidth;
-      // })
     }
   },
   watch: {
@@ -64,4 +64,4 @@ export default {
 
 <style scoped lang="less">
 
-</style>
+</style>