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>

运行结果如下图：