Vue項目中生成二維碼

時間 2019-11-22

標籤 vue 項目生成二維简体版

原文原文鏈接

原本是由後臺生成二維碼的，可是測試後不是很穩定，因爲網絡問題有時候會加載不過來。。。html

以後就發現vue的兩個插件：vue-qart和vue-qr。對比以後發現，vue-qr的配置更全一些，因此選擇了vue-qrvue

vue-qart：npm

一、npm install vue-qart --save網絡

二、import VueQArt from 'vue-qart'curl

　　new Vue({

　　 components: {VueQArt}

　　})

三、<vue-q-art :config="config"></vue-q-art>

四、 data () {

 
      　　return { 
 
         　　 config: { 
 
             　　 value: 'https://www.baidu.com', 
 
              　　imagePath: require('../assets/logo.png'),　　//注意這裏的圖片使用require 
 
              　　filter: 'color' 
 
          　　} 
 
     　　 } 
 
  　　} 
 
  vue-qr: 
 
一、npm install vue-qr --save測試
二、import VueQr from 'vue-qr'ui
 
   　　new Vue({ 
  
      　　 components: {VueQr} 
  
   　　}) 
  
   三、<vue-qr :bgSrc='config.imagePath' :logoSrc="config.imagePath" text="Hello world!" :colorDark="BYTE_POS" :size="200"></vue-qr> 
  
   四、data () { 
  
        　　return { 
   
           　　 config: { 
   
    　　　　　value: 'www.baidu.com',　　//顯示的值、跳轉的地址 
   
               　　imagePath: require('../assets/logo.png'),　　//中間logo的地址 
   
    　　　　　BYTE_POS: 'green' 
   
            　　} 
   
       　　 } 
   
    　　} 
   
    配置以下： 
   
    bgSrc----背景圖 
   
     logoSrc---欲嵌入至二維碼中心的 LOGO 地址 
   
     colorDark---實點顏色 
   
     colorLight---空白區顏色 
   
     dotScale---數據區域點縮小比例