Element UI +Vue页面生成二维码的方法_element vue 前端如何生成二维码(1)

结束

一次完整的面试流程就是这样啦，小编综合了腾讯的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析，分享给小伙伴们，有没有需要的小伙伴们都去领取！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

+ [2.3、方法里边使用](#23_69)
+ [2.4、options](#24options_90)

• 三、方法三 vue-qr
• • 3.1、安装
    • 3.2、页面引入
    • 3.3、组件增加vue-qr
    • 3.4、template使用
    • 3.5、options

一、方法一 采用qrcodejs2生成

1.1、安装二维码插件qrcodejs2

//在终端输入npm命令，安装二维码插件

npm install qrcodejs2 --save

1.2、在vue文件中，引入生成二维码插件

import QRCode from 'qrcodejs2';        //在vue文件中，引入生成二维码插件

1.3、构建二维码对象qrCodeDiv

全部代码

<!-- 生成绑定微信二维码界面 -->
    <el-dialog
 title="微信扫码绑定用户"
 :visible.sync="isShowCard"
 width="400px"
 center
 :before-close="jieBangClose"
 >
      <!-- 定义一个展示二维码的div -->
      <div style="display: flex; justify-content: center">
        <!-- 二维码对象可以通过 ref 绑定 -->
        <div id="qrCode" ref="qrCodeDiv"></div>
      </div>
    </el-dialog>
 
// 1. 方法调用 
bangding(row){
      let memberId = row.memberId;
      this.isShowCard = true;
      if(this.ids != null){
        memberId = this.ids[0];
      }
      this.createQRCode(memberId);
}
//2. 具体的绑定方法
createQRCode(id){
      this.$nextTick(()=>{
      this.$refs.qrCodeDiv.innerHTML = '';//二维码清除
      alert(id)
      new QRCode(this.$refs.qrCodeDiv, {
          text: "id="+ id,//二维码链接，参数是否添加看需求
          width: 200,//二维码宽度
          height: 200,//二维码高度
          colorDark: "#333333", //二维码颜色
          colorLight: "#ffffff", //二维码背景色
          correctLevel: QRCode.CorrectLevel.L //容错率，L/M/H
        });
      })
    }

一、方法二 -采用qrcode生成

2.1、安装qrcode

yarn add qrcode

2.2、页面引入

import QRCode from 'qrcode';

2.3、方法里边使用

getQRCodeUrl(){  
 QRCode.toDataURL(
 'hello world',{
 color: {
 dark:"#010599FF",
 light:"#FFBF60FF"
           }
         }
      )
       .then((url) => {
 // 获取到url后即可在页面使用--二维码图片
 console.log('url', url)
       })
       .catch((e) => {
 console.log('e', e)
       });
 }

2.4、options

名称	类型	默认值	说明
errorCorrectionLevel	String	M	错误处理级别。可选值：low, medium, quartile, high or L, M, Q, H
maskPattern	Number		可选值：0, 1, 2, 3, 4, 5, 6, 7
margin	Number	4
scale	Number	4
width	Number
color.dark	String	#000000ff
color.light	String	#ffffffff

刷面试题

刷题的重要性，不用多说。对于应届生或工作年限不长的人来说，刷面试题一方面能够尽可能地快速自己对某个技术点的理解，另一方面在面试时，有一定几率被问到相同或相似题，另外或多或少也能够为自己面试增加一些自信心，可见适当的刷题是很有必要的。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 前端字节跳动真题解析

  

• 【269页】前端大厂面试题宝典

  

最后平时要进行自我分析与评价，做好职业规划，不断摸索，提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。