vue项目使用qrcodejs2生成二维码

怎甘沉沦 提交于 2020-02-07 02:20:15

总结下,以后用到方便,最近做项目用到根据前端的入参生成二维码,手机访问跳到H5页面

1.引入qrcodejs2

cnpm install qrcodejs2

2.HTML

!-- 二维码弹框 -->
<!-- 我的二维码是在弹框里,使用的话只需要给一个装二维码的元素就可以 -->
<el-button type="primary" @click="payOrder">生成二维码</el-button>
<el-dialog
width="30%"
:title="payment"
@close="closeCode"
:visible.sync="innerVisible"
append-to-body>
<div class="paycode">
<!-- 放置二维码的容器,需要给一个ref -->
    <div id="qrcode" ref="qrcode"></div>
</div>
</el-dialog>

3.js

// 引入
import QRCode from 'qrcodejs2'

methods: {
  // 展示二维码
  payOrder () {
    this.innerVisible = true
    // 二维码内容,一般是由后台返回的跳转链接,这里是写死的一个链接
    this.qrcode = 'https://yuchengkai.cn/docs/frontend/#typeof'
    // 使用$nextTick确保数据渲染
    this.$nextTick(() => {
      this.crateQrcode()
    })
  },
  // 生成二维码
  crateQrcode () {
    this.qr = new QRCode('qrcode', {
      width: 150,
      height: 150, // 高度
      text: this.qrcode // 二维码内容
      // render: 'canvas' // 设置渲染方式(有两种方式 table和canvas,默认是canvas)
      // background: '#f0f'
      // foreground: '#ff0'
    })
    // console.log(this.qrcode)
  },
  // 关闭弹框,清除已经生成的二维码
  closeCode () {
    this.$refs.qrcode.innerHTML = ''
  }
}
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!