Rumah > hujung hadapan web > tutorial js > vue.js生成条形码的方法

vue.js生成条形码的方法

小云云
Lepaskan: 2018-03-26 16:11:28
asal
4381 orang telah melayarinya

本文主要和大家分享vue.js生成条形码的方法,主要以代码的形式和大家分享,希望能帮助到大家。

1.下载插件

npm install @xkeshi/vue-barcode //下载条形码插件
Salin selepas log masuk

2.在main.js中引入插件

import VueBarcode from '@xkeshi/vue-barcode'; //导入条形码插件ue.component('barcode', VueBarcode);  //声明条形码组件
Salin selepas log masuk
<p class="printOrder" v-for="(v,k) in list">
   <barcode :value="v.barcodes" :options="barcode_option" tag="svg" ></barcode>
</p>//注意,要答应的内容不能出现汉字,否则显示不出来,可以有空格特殊字符等data(){    return{
      barcode_option:{
        displayValue: true, //是否默认显示条形码数据
        //textPosition  :&#39;top&#39;, //条形码数据显示的位置
        background: &#39;#fff&#39;, //条形码背景颜色
        valid: function (valid) {
          console.log(valid)
        },
        width:&#39;1px&#39;,
        height: &#39;55px&#39;,
        fontSize: &#39;22px&#39; //字体大小
    },
      list:[{barcodes:&#39;A01-01-01&#39;},{barcodes:&#39;A01-01-01&#39;}]
    }
  },
Salin selepas log masuk

相关推荐:

php生成code128条形码实例分享

PHP生成条形码实例

如何用php实现生成条形码图片

Atas ialah kandungan terperinci vue.js生成条形码的方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan