简易版Vue+jsbarcode生成条形码

m0_65678046

已于 2024-08-09 14:08:18 修改

阅读量95

点赞数 3

文章标签： vue.js 前端 javascript

于 2024-07-31 14:17:50 首次发布

本文链接：https://blog.csdn.net/m0_65678046/article/details/140820707

版权

第一步：安装jsbarcode依赖

npm install jsbarcode --save

第二步：组件的封装与设计

<template>
    <div style="width: 800px"  v-if="isShowModal">
      条码
      <div style="border: 1px solid black;">
        <div class="top-barcode">
          <!--    top左      -->
          <div >{{ codeData.topLeft }}</div>
          <!--    top中     -->
          <div>{{ codeData.topCenter }}</div>
          <!--    top右      -->
          <div style="text-align: right;padding-right: 10px;">{{ codeData.topRight }}</div>
        </div>
        <div style="text-align: center;height: 80px;">
          <!--    条码      -->
          <svg id="barcode"></svg>
        </div>
        <div class="footer-barcode">
          <!--     底部左     -->
          <div style="padding-left: 10px;text-align: left;">{{ codeData.botLeft }}</div>
          <!--     底部右     -->
          <div>{{codeData.botRight}}</div>
        </div>
      </div>
    </div>
</template>
<script>
import JsBarcode from 'jsbarcode'
export default {
  name: 'JBar',
  data() {
    return {
      isShowModal: false,
      codeData:{
        topLeft:'',
        topCenter:'',
        topRight:'',
        CenterCode:'',
        botLeft:'',
        botRight:'',
      }
    }
  },
  methods: {
    closeMod(){
      this.isShowModal = false
      this.codeData={
        topLeft:'',
        topCenter:'',
        topRight:'',
        CenterCode:'',
        botLeft:'',
        botRight:'',
      }
    },
    openModal(item) {
      this.codeData = item
      this.isShowModal = true
      this.$nextTick(()=>{
        JsBarcode("#barcode", item.CenterCode || '00000000000', {
          format: "CODE39",//选择要使用的条形码类型
          // width: 1,//设置条之间的宽度
          height: 36,//高度
          displayValue: true,//是否在条形码下方显示文字
//   text:"456",//覆盖显示的文本
//   fontOptions:"bold italic",//使文字加粗体或变斜体
//   font:"fantasy",//设置文本的字体
//   textAlign:"left",//设置文本的水平对齐方式
//   textPosition:"top",//设置文本的垂直位置
//   textMargin:5,//设置条形码和文本之间的间距
//           fontSize: 15,//设置文本的大小
//   background:"#eee",//设置条形码的背景
//   lineColor:"#2196f3",//设置条和文本的颜色。
//           margin: 15//设置条形码周围的空白边距

        })
      })

    },
  }
}
</script>
<style scoped >
.top-barcode {
  display: flex;
  justify-content: space-between;
  div {
    flex: 0.2;
    height: 21px;
  }
}
.footer-barcode {
  display: flex;
  justify-content: space-between;
  div {
    flex: 1;
    height: 21px;
    text-align: center;
  }
}
</style>

第三步：使用

<template>
  <div >
<div style="">
  头部上：<input v-model="dataCode.topLeft"><br/>
  头部中：<input v-model="dataCode.topCenter"><br/>
  头部右：<input v-model="dataCode.topRight"><br/>
  条码内容：<input v-model="dataCode.CenterCode"><br/>
  底部左：<input v-model="dataCode.botLeft"><br/>
  底部右：<input v-model="dataCode.botRight"><br/>
  <div style="width: 200px;display: flex;justify-content: space-between;margin-top: 20px">
    <button @click="goCode" :disabled="!dataCode.CenterCode">生成条码</button>
    <button @click="goCodeRtb"  v-if="dataCode.CenterCode || dataCode.topLeft || dataCode.topCenter || dataCode.CenterCode || dataCode.botLeft || dataCode.botRight">重置</button>
  </div>

</div>

    <viewBarCode ref="viewBarCode"></viewBarCode>
  </div>
</template>

<script>

import viewBarCode  from "@/components/jsbarcode";
export default {
  name: 'App',
  components: {
    viewBarCode
  },
  data(){
    return{
      dataCode:{
        topLeft:'',
        topCenter:'',
        topRight:'',
        CenterCode:'',
        botLeft:'',
        botRight:'',
    }
    }
  },
  methods:{
    goCode(){
      let item = this.dataCode
      this.$refs.viewBarCode.openModal(item)
    },
    goCodeRtb(){
      this.dataCode={
        topLeft:'',
            topCenter:'',
            topRight:'',
            CenterCode:'',
            botLeft:'',
            botRight:'',

      }
      this.$refs.viewBarCode.closeMod()
    }
  }
}
</script>

保存，看效果！