ホームページ > ウェブフロントエンド > jsチュートリアル > vue.jsでバーコードを生成する方法

vue.jsでバーコードを生成する方法

小云云
リリース: 2018-03-26 16:11:28
オリジナル
4373 人が閲覧しました

この記事では、vue.js でバーコードを生成する方法を主にコードの形式で説明します。お役に立てれば幸いです。

1. プラグインをダウンロードします

npm install @xkeshi/vue-barcode //下载条形码插件
ログイン後にコピー

2. main.js にプラグインを導入します

import VueBarcode from '@xkeshi/vue-barcode'; //导入条形码插件ue.component('barcode', VueBarcode);  //声明条形码组件
ログイン後にコピー
<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;}]
    }
  },
ログイン後にコピー

関連する推奨事項:

php code128 バーコード生成サンプル共有

PHP で生成されたバーコードサンプル

PHPを使用してバーコード画像を生成する方法

以上がvue.jsでバーコードを生成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート