位置:首页 > web前端 > vue

vue小技巧 如何实现二维码生成功能

dearweb 发布:2021-10-22 17:57:50阅读:

之前接触php时大部分二维码生成都是使用php生成,最近看了下vue觉得前端生成也是很方便,现在将vue使用 qrcodejs2 生成二维码的方式分享给大家。

首先准备好依赖(安装qrcodejs2)

准备需要使用的依赖项

npm install qrcodejs2 --save

使用依赖生成二维码

下面是所有的组件代码,这里需要注意的是,我们一定要在dom元素渲染之后再去执行二维码生成的功能,以保证我们的二维码能够正常生成并渲染到页面。

<template>
  <div class='app-about-us'>
    <div id="qrCode"
         ref="qrCodeDiv"></div>
  </div>
</template>
<script>
import QRCode from 'qrcodejs2'
export default {
  name: '',
  data() {
    return {}
  },
  inject: ['reload'],
  created() {
    this.$nextTick(function() {
      this.mef()
    })
  },
  methods: {
    mef() {
      new QRCode(this.$refs.qrCodeDiv, {
        text: 'http://www.dearweb.com',
        width: 200,
        height: 200,
        colorDark: '#222', //二维码颜色
        colorLight: '#fff', //二维码背景色
        correctLevel: QRCode.CorrectLevel.L //容错率,L/M/H
      })
    }
  }
}
</script>
<style scoped lang='scss'>
</style>

最后生成的是base64格式图片。

image.png

24人点赞 返回栏目 分享一波

小礼物走一波,支持作者

还没有人赞赏,支持一波吧

留言 评论仅代表网友个人 留言列表

暂无留言,快来抢沙发吧!

手机扫码查看 手机扫码查看