vue项目使用qrcodejs2生成二维码

Fansr_

已于 2022-05-18 09:11:52 修改

阅读量1.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js elementui javascript

于 2022-03-10 14:27:12 首次发布

本文链接：https://blog.youkuaiyun.com/Fansr_/article/details/123400483

vue 专栏收录该内容

17 篇文章

订阅专栏

这篇博客介绍了如何在Vue项目中使用qrcodejs2库生成二维码。首先通过cnpm安装qrcodejs2，然后在template文件中创建弹框和二维码容器。在script文件中导入qrcodejs2，并在方法中定义生成二维码的逻辑，包括设置二维码内容、尺寸和样式。当点击按钮时，显示弹框并生成二维码；关闭弹框时，清空二维码内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、安装

cnpm i qrcodejs2 -S

2、使用

template文件

<!-- 二维码弹框 -->
<el-button type="primary" @click="showCode">生成二维码</el-button>
<el-dialog
    width="30%"
    title="二维码弹框展示"
    @close="closeCode"
    :visible.sync="dialogVisible"
    append-to-body>
    <div class="content">
        <!-- 放置二维码的容器,需要给一个ref -->
        <div id="qrcode" ref="qrcode"></div>
    </div>
</el-dialog>

script文件

// 引入
import QRCode from 'qrcodejs2'

methods: {
  // 展示二维码
  showCode() {
    this.dialogVisible = true
    // 二维码内容
    this.qrcode = '****'
    // 使用$nextTick确保数据渲染
    this.$nextTick(() => {
      this.createQrcode()
    })
  },
  // 生成二维码
  createQrcode() {
    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 = ''
  }
}