Home > Web Front-end > JS Tutorial > body text

How to generate barcode with vue.js

小云云
Release: 2018-03-26 16:11:28
Original
4358 people have browsed it

This article mainly shares with you the method of generating barcodes with vue.js, mainly in the form of code. I hope it can help you.

1. Download the plug-in

npm install @xkeshi/vue-barcode //下载条形码插件
Copy after login

2. Introduce the plug-in into main.js

import VueBarcode from '@xkeshi/vue-barcode'; //导入条形码插件ue.component('barcode', VueBarcode);  //声明条形码组件
Copy after login
<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;}]
    }
  },
Copy after login

Related recommendations:

php generate code128 barcode example Share

PHP generated barcode example

How to use PHP to generate barcode images

The above is the detailed content of How to generate barcode with vue.js. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!