<template>
  <div>
    <svg id="barcode" style="display: flex;"></svg>
  </div>
</template>

<script>

import JsBarcode from "jsbarcode";
import { ref, onMounted, nextTick, update } from 'vue'
export default {
  name: "JsBarcode",
  props: {
    presno: {
      required: true,
      type: String
    },
  },
  created() {
    console.log('created>>>', this.presno)
    // JsBarcode('#barcode',this.presno,{
    //   format:"CODE128",lineColor:"#000",displayValue:true,
    //   fontSize:12,width:1.3,height:80
    // })
  },
  mounted() {
    console.log('mounted>>>', this.presno)
    JsBarcode('#barcode',this.presno,{
      format:"CODE128",lineColor:"#000",displayValue:true,
      fontSize:15,width:1.5,height:80,fontOptions:"bold",font:"Microsoft YaHei"
    })
  },
  beforeUpdate() {
    console.log('beforeUpdate>>>', this.presno)
    JsBarcode('#barcode',this.presno,{
      format:"CODE128",lineColor:"#000",displayValue:true,
      fontSize:15,width:1.5,height:80,fontOptions:"bold",font:"Microsoft YaHei"
    })
  },
  update() {
    console.log('update>>>', this.presno)
    JsBarcode('#barcode',this.presno,{
      format:"CODE128",lineColor:"#000",displayValue:true,
      fontSize:15,width:1.3,height:40,fontOptions:"bold",font:"Microsoft YaHei"
    })
  },
  activated() {
    console.log('activated>>>', this.presno)
    JsBarcode('#barcode',this.presno,{
      format:"CODE128",lineColor:"#000",displayValue:true,
      fontSize:15,width:1.3,height:40,fontOptions:"bold",font:"Microsoft YaHei"
    })
  },
  beforeDestroy() {
    console.log('beforeDestroy>>>', this.presno)
    // JsBarcode('#barcode',this.presno,{
    //   format:"CODE128",lineColor:"#000",displayValue:true,
    //   fontSize:12,width:1.3,height:40
    // })
  }
}
</script>

<style scoped>

</style>
