vue.js 二維碼生成組件

安裝

通過NPM安裝

npm install vue-qart --save

插件應用

將vue-qart引入你的應用

import VueQArt from 'vue-qart' new Vue({ components: {VueQArt} })

在你的應用中這樣使用vue-qart

<vue-q-art :config="config" :downloadButton="downloadButton"></vue-q-art>

data () {
    return { msg: 'Welcome to Your Vue.js App', config: { value: 'https://www.baidu.com', imagePath: './examples/assets/logo.png', filter: 'color' }, downloadButton: false } }

組件參數

名稱	類型	默認值	說明
value	String	-	QR code表示的數據
imagePath	String	-	合並圖片的路徑
filter	String	threshold	定義一個圖像過濾器，threshold或者color
size	Number	195	定義圖像的大小，單位是px
version	Number	10	QR code版本 (1 <= version <= 40)
background	String	-	生成背景色
fillType	String	scale_to_fit	圖片放置類型(fill 或者 scale to fit)

 

 

 

 

 

 

 

動態生成二維碼

 

cnpm install --save qrcodejs2

 

<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="id"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="二維碼"
        width="100">
        <template slot-scope="scope">
          <el-button @click="checkEwmClick(scope.row)" type="text" size="small">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="二維碼"
      :visible.sync="dialogQrcodeVisible"
      width="30%"
      :before-close="handleDialogQrcodeClose">
      <div style="text-align:center; margin-left:auto; margin-right:auto;">
        <div id="qrcodeshow" ref="qrCodeUrl"></div> <!-- 創建一個div，並設置id為qrcode -->
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogQrcodeVisible = false">關閉</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2'// 引入qrcode
export default {
  name: 'test',
  mounted () {
    // 需要先顯示出來，然后再隱藏掉；  否則動態生成的二維碼，第一次會報錯，對象找不到。可能是跟初始化有關系，沒有顯示出來的時候並沒有初始化HTML
    this.dialogQrcodeVisible = false
  },
  data () {
    return {
      dialogQrcodeVisible: true,
      tableData: [{
        id: '1',
        name: '百度',
        address: '上海市普陀區金沙江路 1518 弄',
        url: 'http://www.baidu.com'
      }, {
        id: '2',
        name: 'QQ',
        address: '上海市普陀區金沙江路 1517 弄',
        url: 'http://www.qq.com'
      }, {
        id: '3',
        name: '163.COM',
        address: '上海市普陀區金沙江路 1519 弄',
        url: 'http://www.163.com'
      }, {
        id: '4',
        name: '淘寶',
        address: '上海市普陀區金沙江路 1516 弄',
        url: 'http://www.taobao.com'
      }]
    }
  },
  methods: {
    checkEwmClick (url) {
      let vm = this
      vm.$nextTick(() => {
        vm.dialogQrcodeVisible = true
        let obj = document.getElementById('qrcodeshow')
        obj.innerHTML = ''
        vm.genarateQrcode(url)
      })
    },
    handleDialogQrcodeClose () {
      this.dialogQrcodeVisible = false
    },
    genarateQrcode (url) {
      let qrcode = new QRCode(this.$refs.qrCodeUrl, {
        width: 50,
        height: 50,
        text: url, // 二維碼地址
        colorDark: '#000',
        colorLight: '#fff',
        correctLevel: QRCode.CorrectLevel.H
      })
      console.log('qrcode = ' + JSON.stringify(qrcode))
    }
  }
}
</script>