第一步:安装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>
保存,看效果!