<template>

 <div :id="id" :ref="id" style="width: 100%;height: 100%;text-align: center;"/>

</template>

<script>

import QRCode from 'qrcodejs2'

export default {

 props: {

  id: {

   type: String,

   required: true

  },

  text: { // 后端返回的二维码地址

   type: String,

   default: 'http://jindo.dev.naver.com/collie'

  },

  width: {

   type: String,

   default: '128'

  },

  height: {

   type: String,

   default: '128'

  },

  colorDark: {

   type: String,

   default: '#000000'

  },

  colorLight: {

   type: String,

   default: '#ffffff'

  },

  logoImage: {

   type: String,

   default: ''

  }

 },

 data () {

  return {

   qrcode: ''

  }

 },

 watch: {

  text (newText) {

   this.createQrcode()

  }

 },

 mounted () {

  this.createQrcode()

 },

 methods: {

  createQrcode () {

   if (this.qrcode) { // 有新的二维码地址了，先把之前的清除掉

    this.$refs[this.id].innerHTML = ''

   }

   this.qrcode = new QRCode(this.$refs[this.id], {

    text: this.text, // 页面地址 ,如果页面需要参数传递请注意哈希模式#

    width: this.width, // 二维码宽度 （不支持100%）

    height: this.height, // 二维码高度 （不支持100%）

    colorDark: this.colorDark,

    colorLight: this.colorLight,

    correctLevel: QRCode.CorrectLevel.H

   })

   // 添加二维码中间的图片

   if (this.logoImage) {

    let logo = new Image()

    logo.setAttribute('crossOrigin', 'Anonymous')

    logo.src = this.logoImage

    logo.onload = () => {

     let qrImg = this.qrcode._el.getElementsByTagName('img')[0]

     let canvas = this.qrcode._el.getElementsByTagName('canvas')[0]

     this.qrcode._el.title = ''

     canvas.style.display = 'inline-block'

     let ctx = canvas.getContext('2d')

     // 设置logo的大小为二维码图片缩小的3.7倍，第二与第三参数代表logo在二维码的位置

     ctx.drawImage(logo, (128 - 128 / 3.7) / 2, (128 - 128 / 3.7) / 2, 128 / 3.7, 128 / 3.7)

     qrImg.src = canvas.toDataURL()

     qrImg.style.display = 'none'

     this.$refs.id.appendChild(this.qrcode._el)

    }

   }

   console.log(this.qrcode, 'qrcode')

  },

  // 制作另一个二维码

  updateCode () {

   this.qrcode.makeCode('http://naver.com')

  }

 }

}

</script>