vue页面实现二维码加载

原创已于 2023-09-22 19:35:23 修改 · 303 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #ecmascript

于 2023-09-22 14:37:37 首次发布

本文介绍了如何在Vue项目中安装并使用qrcode插件，通过在模板中创建canvas元素，然后在mounted生命周期钩子中调用$QRCode.toCanvas方法生成二维码，展示了从安装到效果展示的完整过程。

vue页面实现二维码加载

一 、//  安装插件
npm install --save qrcode
//   main.js引入
import QRCode from 'qrcode'
Vue.prototype.$QRCode = QRCode

二、

vue页面代码


<template>
  <div class="app-wrapper">
    <canvas ref="canvass" id="canvas"></canvas>
  </div>
</template>


<script>

export default {
  data() {
    return {};
  },
  mounted () {
    this.$nextTick(() => {
      let canvas = this.$refs.canvas;
      this.$QRCode.toCanvas(canvas, url, function (err) {
        if (err) console.log(err)
      })
    })
  },
};
</script> 
<style lang="scss">
</style>

三、
最后看效果
在这里插入图片描述