Vue项目实践——实现手机扫描二维码预览页面效果

背景：vue-cli3 + ant-design-vue 搭建的后台管理系统
需求：实现扫描二维码即可在手机预览H5页面功能

使用插件：qrcode

step1:安装插件

npm install qrcode --save

step2：引入插件
在项目中新建QRcode.vue文件

<template>
  <div id="qrCode">
    <div id="code"></div>
    <canvas id="canvas"></canvas>
  </div>
</template>
<script>
import QRCode from "qrcode";
export default {
  props: {
    url: {
      type: String
    }
  },
  data() {
    return {
      msg: "hello vue",
      codes: ""
    };
  },

  components: {
    QRCode: QRCode
  },

  methods: {
    useqrcode() {
      var canvas = document.getElementById("canvas");
      QRCode.toCanvas(canvas, this.url, function(error) {
        if (error) console.error(error);
      });
    }
  },

  mounted() {
    this.useqrcode();
  }
};
</script>
<style lang="stylus" scoped>
#qrCode {
  text-align: center;
}
</style>

step3：在需要使用该插件的地方引入
例如：

<template>
 <div>
   <QRcode :url='url'/>
 </div>
</template>
<script>
import QRcode from '../../QRcode.vue'
export default {
components: {
  QRcode
},
data() {
 return {
   url:'(需要生成二维码的网址)'
 }
}
}
</script>