【MAC 上学习 Vue】Day 13. 项目中引入 QRCod

安装 QRCode

1. 在终端输入以下命令：

cnpm install qrcode --save

2. 在 vue 文件中，引入 QRCode：

import Vue from 'vue'
import QRCode from 'qrcode'

Vue.use(QRCode)

QRCode 样例

1. 样例代码：

<template>
  <div class="hello">
    <canvas id='canvas'></canvas>
  </div>
</template>

<script>
import Vue from 'vue'
import QRCode from 'qrcode'

Vue.use(QRCode)

export default {
  data () {
    return {}
  },
  mounted(){
    this.useqrcode();
  },
  methods:{
    useqrcode:function(){
      var canvas=document.getElementById('canvas');
      QRCode.toCanvas(canvas,'https://www.baidu.com',function(error){
        if(error){
          console.error(error);
        }else{
          console.log('Success!');
        }
      })
    }
  }
}
</script>

<style scoped>
</style>

2. 运行结果如下，通过微信扫描二维码，可打开百度：

   
   1.png