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>