qrcode 將連接生成二維碼

Vue項目中遇到一個將連接轉化爲二維碼的情景。
搜了一下，qrcode能夠知足須要。
github地址:
https://github.com/soldair/no...

安裝：

npm install --save qrcode

Demo代碼以下：

<template>
  <div class="home-container">
    <div class="banner-box">
      <canvas id="qrccode-canvas"></canvas>
    </div>
    <div class="btn-wrap">
      <textarea type="textarea" v-model="bannerUrl" placeholder="輸入連接"></textarea>
      <button @click="createQrc">點擊生成二維碼</button>
    </div>
  </div>
</template>

<script>
var QRCode = require('qrcode')
var canvas = ''
export default {
  data () {
    return {
      bannerUrl: ''
    }
  },
  methods: {
    createQrc: function () {
      if (!this.bannerUrl) {
        window.alert('連接不能爲空')
        return false
      }
      QRCode.toCanvas(canvas, this.bannerUrl, (error) => {
        if (error) {
          console.log(error)
        } else {
          console.log('success')
        }
      })
    }
  },
  mounted () {
    this.$nextTick(function () {
      // DOM操做
      canvas = document.getElementById('qrccode-canvas')
    })
  }
}
</script>
<style>
.btn-wrap {
  width: 260px;
  height: 260px;
  margin: 0 auto;
}
.btn-wrap textarea{
  width: 260px;
  height: 260px;
}
</style>

運行結果以下圖：