开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第12天，点击查看活动详情。

前言

这个组件是很久以前写的，为了参加这个更文挑战，更新的其他文章暂时没法发布，所以先用这个组件占个楼。

思路

这个组件的使用场景就是常用的场景，用到了一个开源的npm工具：qrcodejs2。

而且是最基础的使用方法，即提供一个二维码的使用场景：字符串、链接、数据等等，都可以，然后可以对应生成一个二维码进行分享或者使用。

扩展思路：

简单场景下，方便迅速的生成一个二维码
实现扫码登录
加密文本，加密信息

代码分享及解析

页面效果：

安装：

$ npm i qrcodejs2

组件源码如下：

<template>
  <div class="page page-code">
    <div class="tools">
      <p class="flex">
        <el-input v-model="codeValue" />
        <el-button
          @click="reCreatQrCode"
          type="primary"
        >生成二维码</el-button>
      </p>
    </div>
    <div class="qrcode-wrap">
      <div
        class="qrcode"
        id="qrCode"
        ref="qrCodeUrl"
      ></div>
    </div>
  </div>
</template>

<script>

import QRCode from 'qrcodejs2'

export default {
  name: "page",
  props: {},
  components: {},
  data() {
    return {
      codeValue: '',
      qrcode: '',
    }
  },
  methods: {
    creatQrCode(text) {
      document.getElementById('qrCode').innerHTML = ''
      this.qrcode = new QRCode(this.$refs.qrCodeUrl, {
        text: text, // 需要转换为二维码的内容
        width: 300,
        height: 300,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
      })
    },
    reCreatQrCode() {
      if (!this.codeValue) {
        this.$message({
          type: 'warning',
          message: '请输入二维码需要包含的数据！'
        })
        return
      }
      this.creatQrCode(this.codeValue)
    }
  }
}
</script>

<style lang="scss" scoped>
.qrcode-wrap {
  display: inline-block;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  overflow: hidden;
  .qrcode {
    display: inline-block;
  }
}
</style>

如上代码所示其实很简单，主要是这个组件的使用方法进行一个简单的记录。

具体流程如下：

提供一个容器，用来展示生成的二维码，是一个 dom 节点。
QRCode 的使用方法： new QRCode(refEl, config)
config 主要字段 text，用来记录需要转换为二维码的内容。
config 其他字段：
- width：二维码的宽度
- height：二维码的高度
- colorDark：二维码主要颜色
- colorLight：二维码背景色
- correctLevel：二维码加密等级
每次重新渲染二维码时，需要清空容器：document.getElementById('qrCode').innerHTML = ''

后记

这个组件比较简单，主要是方便想用的时候能直接拿来用，虽然往上有很多教程，但还是自己做过的用起来比较顺手吧。

vue组件-二维码生成器

前言

思路

代码分享及解析

后记

参考资料