VUE-QR二次元コードとダウンロードを生成

1. NPMをインストール

NPM VUE-QR --saveをインストール

2.デモ

<テンプレート> 
    <EL-カードクラス= "チャンネルボックス" = V-ための"チャネルで（項目、インデックス）"：キー= "インデックス"シャドウ= "常に"：ボディスタイル= "{パディング'0PX'}" > 
        <DIV CLASS = "channelHead"> 
            <スパンクラス= "channelId"> {{item.channel_id}} </ span>を
             <DIV CLASS = "CHANNELNAME" @クリック= "changeName（アイテム）"> {{item.channel_name }} </ div> 
        </ div> 
        <DIV CLASS = "channelQrcode" @クリック= "bigQrcode（アイテム）"> 
            <VUE-QR：テキスト= "item.channel_qr_url"：サイズ= "120"：マージン= "0 "> </ VUE-QR> 
        </ div> 
        <divのクラス="channelBtn "> 
            <EL-ボタン@クリック=" isDelete（item.channel_id）」タイプ= "テキスト"スタイル= "色：＃1 F56C6C;">删除</ EL-ボタン>channelBtn "> 
            <EL-ボタンタイプ="テキスト」スタイル= "色：＃1 67C23A;" @をクリック= "downloadImg（インデックス、項目）">下载</ EL-ボタン> 
        </ div> 
    </ EL-カード> 
<スクリプト> 
インポートvueQrから'VUE-QR' 
の書き出しのデフォルト{ 
    コンポーネント：{ 
        vueQr 
    }、
    データ（）{ 
        リターン{  チャネル：[]  }  }、 メソッド：{  //ダウンロードチャネルの二次元コード画像 downloadImg（インデックス、項目）{  VAR oQrcode = document.querySelectorAll（ 'channelQrcode IMG'。）= VaRのURL oQrcode [インデックス] .SRCするvarのdocument.createElement（ 'A' = ）= VAR新しい新しいイベントのMouseEvent（ 'クリック'の名前の図は、ダウンロードしてください//）。ダウンロード=
a.href = item.channel_name URL //合成機能、ダウンロードa.dispatchEvent（イベント）}}} < / SCRIPT>

3.説明共通の属性

プロパティ	説明
テキスト	二次元コードの内容
サイズ	サイズの幅と高さ2次元コード、それは正方形であるので、あなたはパラメータを設定することができます
マージン	デフォルトの余白20ピクセルは、0にそれを自分自身を好きではありません
colorDark	色の本当のポイントは、効果的かつcolorLightように一緒にセットアップするために注意を払います
colorLight	ブランクカラーは、注意が効果的とcolorDarkように一緒にセットアップします
bgSrc	【背景図なし卵で、アドレスを組み込み、設定することはお勧めしません
logoSrc	2次元コードパターンの真ん中が、これは、良いことです、それはプロのポイントを見て設定します
logoScale	中央の図形の大きさは、スキャンコードの障害のためにあまりにも多く、あまりにも大きなリードを設定していません
dotScale	大きさのものを少しは、これはもつれた関係ありません、私は設定はお勧めしません。