Skip to content
欢迎扫码关注公众号

Vue.js 生成二维码

后台管理的 Vue.js 项目需要展示一个二维码,记录一下采用的实现方法。
关于 qrcodejs2 的更多信息请参考 官方文档

安装 qrcodejs2

说是在 Vue.js 中直接使用 qrcode 包会有错误,没试过。
另外还有个 vue-qr 的包,可自定义性更高,不过在项目中安装失败了,就没再尝试。

bash
npm i qrcodejs2

使用步骤

  1. 导入 QRCode

    javascript
    import QRCode from 'qrcodejs2'
  2. 添加页面控件

    html
    <div class="qrcode" ref="qrCode"></div>
  3. 创建 QRCode

    javascript
    this.qrCode = new QRCode(this.$refs.qrCode, {
        text: 'https://www.liujiajia.me',
        width: 200,
        height: 200,
        colorDark: '#409eff',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H,
    })
  4. 清除 QRCode

    这种方式清除的是 canvas 标签中的内容,页面展示的二维码图片仍然存在。
    如需隐藏,可以配合 v-show 来控制其展示。

    javascript
    this.qrCode.clear()

    这种方式会清除 canvas 和 对应的图片,但是再次调用 makeCode 方法时不会再创建二维码。

    javascript
    this.$refs.qrCode.innerHTML = '';
  5. 刷新 QRCode

    可以调用 makeCode 方法更新二维码的内容。

    javascript
    this.qrCode.makeCode("https://www.liujiajia.me/blog/")

Page Layout Max Width

Adjust the exact value of the page width of VitePress layout to adapt to different reading needs and screens.

Adjust the maximum width of the page layout
A ranged slider for user to choose and customize their desired width of the maximum width of the page layout can go.

Content Layout Max Width

Adjust the exact value of the document content width of VitePress layout to adapt to different reading needs and screens.

Adjust the maximum width of the content layout
A ranged slider for user to choose and customize their desired width of the maximum width of the content layout can go.