vue2.0 自定义 生成二维码（QRCode）组件

1.自定义 生成二维码组件

QRCode.vue

<!-- 生成二维码 组件 -->
<template>
  <canvas
    class="qrcode-canvas"
    :class="{show: show}"
    :style="{height: size + 'px', width: size + 'px'}"
    :height="size"
    :width="size"
    ref="qr"
  ></canvas>
</template>

<script>
  import qr from 'qr.js'
  export default {
    name: 'qrcode',
    props: {
      val: {
        type: String,
        required: true
      },
      size: {
        type: Number,
        default: 200
      },
      // 'L', 'M', 'Q', 'H'
      level: String,
      bgColor: {
        type: String,
        default: '#FFFFFF'
      },
      fgColor: {
        type: String,
        default: '#000000'
      },
      show: {
        type: Boolean,
        default: true
      }
    },
    watch: {
      size: function(){
        this.update()
      },
      val: function(){
        this.update()
      },
      level: function(){
        this.update()
      },
      bgColor: function(){
        this.update()
      },
      fgColor: function(){
        this.update()
      }
    },
    mounted () {
      this.update()
      console.log(this.show)
    },
    methods:{
      update () {
        var size = this.size
        var bgColor = this.bgColor
        var fgColor = this.fgColor
        var $qr = this.$refs.qr
        var qrcode = qr(this.val)
        var ctx = $qr.getContext('2d')
        var cells = qrcode.modules
        var tileW = size / cells.length
        var tileH = size / cells.length
        var scale = (window.devicePixelRatio || 1) / getBackingStorePixelRatio(ctx)
        $qr.height = $qr.width = size * scale
        ctx.scale(scale, scale)
        cells.forEach(function (row, rdx) {
          row.forEach(function (cell, cdx) {
            ctx.fillStyle = cell ? fgColor : bgColor
            var w = (Math.ceil((cdx + 1) * tileW) - Math.floor(cdx * tileW))
            var h = (Math.ceil((rdx + 1) * tileH) - Math.floor(rdx * tileH))
            ctx.fillRect(Math.round(cdx * tileW), Math.round(rdx * tileH), w, h)
          })
        })
      }
    }
  }
  function getBackingStorePixelRatio (ctx) {
    return (
      ctx.webkitBackingStorePixelRatio ||
      ctx.mozBackingStorePixelRatio ||
      ctx.msBackingStorePixelRatio ||
      ctx.oBackingStorePixelRatio ||
      ctx.backingStorePixelRatio ||
      1
    )
  }
</script>

<style lang="less" scoped>
  .qrcode-canvas {
    display: none
  }
  .show {
    display: block;
  }
</style>

 

2.页面调用

<!-- 生成二维码 -->
<template>
  <div>
    <!-- 标题栏 -->
    <mt-header title="生成二维码">
      <router-link to="/" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
    </mt-header>
    <!-- 内容 -->
    <div id="qrCode">
      <QRCode :val="val" :show="true" />
    </div>
    <!-- 按钮 -->
    <mt-button type="primary" @click="changeUrl">修改url</mt-button>
  </div>
</template>

<script>
  import QRCode from '../components/QRCode.vue'
  import { MessageBox } from 'mint-ui';

  export default {
    name: 'QR',
    components: {
      QRCode
    },
    data(){
      return {
        val:'https://www.baidu.com/s?wd=123'
      }
    },
    methods: {
      changeUrl(){
        MessageBox.prompt('请输入新的url').then(({ value, action }) => {
          this.val = value;
        });
      }
    }
  }
</script>

<style>
  /*垂直水平居中*/
  #qrCode {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -100px 0 0 -100px;
  }
  .mint-button{
    width: 80%;
    margin: 20px auto;
    display: block;
  }
</style>

 

3.效果图