vue-生成二维码生成点击输入框内叉号移除生成的二维码输入框聚焦

Posted 2022-12-09 水香木鱼

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue-生成二维码生成点击输入框内叉号移除生成的二维码输入框聚焦相关的知识，希望对你有一定的参考价值。

博主介绍

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

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

文章目录

简介：这是一篇有关【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

vue-生成二维码生成点击输入框内叉号移除生成的二维码输入框聚焦

博主介绍

文章目录

1、安装QR code

2、完整代码

3、配置文档

相关推荐