博主介绍

📢点击下列内容可跳转对应的界面，查看更多精彩内容！

🍎主页：水香木鱼
🍍专栏：后台管理系统

文章目录

简介：这是一篇有关【vue-生成二维码【生成、点击输入框内叉号移除生成的二维码、输入框聚焦】】的文章，博主用最精简的语言去表达给前端读者们。

在这里插入图片描述

1、安装QR code

npm i qrcodejs2 --save

2、完整代码

<!-- 必要时使用this.$nextTick()确保数据渲染 -->
<template>
  <div>
    <el-input
      v-model="value"
      clearable
      ref="focus"
      style="width: 50%"
      @clear="deleteQrcode()"
    />
    <el-button @click="createQrcode()" @keyup.enter="keyupSubmit()"
      >生成二维码</el-button
    >
    <section class="qrcode-content">
      <div id="qrcodeImg" ref="qrcodeImg" />
    </section>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";
export default {
  data() {
    return {
      handleStatus: false,
      // 要转换为二维码的文字或链接
      value: "https://blog.csdn.net/weixin_48337566?type=blog",
      // 二维码实例
      qr: null,
    };
  },
  created() {
    this.keyupSubmit();
  },
  methods: {
    // 键盘事件
    keyupSubmit() {
      document.onkeydown = (e) => {
        let _key = window.event.keyCode;
        if (_key === 13 && !this.clickState) {
          this.createQrcode();
        }
      };
    },
    /**
     * 创建二维码
     * @description new QRcode({})
     * @return void
     */
    createQrcode() {
      // 是否需要生成多个二维码(只要你new QRCode,会一直重复生成)
      // 如果qr实例有内容了,就证明生成过了(直接return拦截)
      //判断输入的内容是否为空，
      if (this.value == "") {
        alert("请输入要生成的内容！");
      } else {
        if (this.qr != null) return false;
        // 创建二维码实例
        // 第一个参数: 要渲染的DOM(ref获取或id获取)
        // 第二个参数: 二维码各项配置介绍(详见文章底部)
        this.qr = new QRCode(this.$refs.qrcodeImg, {
          text: this.value,
          width: 200,
          height: 200,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H,
        });
      }
    },

    /**
     * 移除二维码
     * @description innerHTML
     * @return void
     */
    deleteQrcode() {
      // 清空实例与innerHTML
      this.qr = null;
      this.$refs.qrcodeImg.innerHTML = "";
      this.$refs["focus"].focus(); //输入框自动聚焦
    },
  },
};
</script>

<style scoped>
/* 样式根据您的需求修改即可 */
.qrcode-content {
  /* 二维码最外层容器 */
  margin-top: 20px;
}
</style>

3、配置文档

名称	默认值	文字说明
text	-	转换的链接或者文字
width	200	图片宽度
height	200	图片高度
colorDark	#ffffff	前景色
colorLight	#1890ff	背景色
correctLevel	QRCode CorrectLevel.L	容错级别，可设置为: QRCode CorrectLevel.L、QRCode CorrectLevel.M、QRCode CorrectLevel.Q、QRCode CorrectLevel.H(从上至下生成二维码的密度越来越高 L-M-Q-H)
render	canvas	渲染方式，默认canvas,可选table