vue 二维码显示 在线前端实现二维码显示功能

使用前提

• 掌握了Vue
• 会使用npm等模块化工具

如何在前端解析并且显示二维码？

首先我们要明白二维码是什么？

二维码就是将我们能看懂的文字语言，以机器语言的形式存储了起来。其中黑色小方块代表的是1，白色小方块代表的是0，黑白相间的图案其实就是一串编码，扫码的过程就是翻译这些编码的过程。还要值得注意的地方就是，在它的边上都有三个大方块，这主要是在起定位作用。三个点能确定一个面，这能保证我们在扫码时，不管手机怎样放置都能得到特定的信息。

使用vue-qrcode-directive插件

vue-qrcode-directive是什么？

• 一种使用Vue指令去解析二维码的插件

• 安装使用起来十分方便，只要在元素上使用v-qr指令即可

一、安装

npm install vue-qrcode-directive --save

or

yarn add vue-qrcode-directive

二、在main.js中注册

import qrcode from 'vue-qrcode-directive'
Vue.use(qrcode)

三、在元素上使用v-qr指令

<template>    
  <div v-qr="options" v-if="options" />
</template>
<script>
export default {
  data() {
    return {
      options: 'www.baidu.com'
    }
  }
}
</script>

options参数配置

简易配置

options: '我是二维码的内容'

即直接提供二维码的数据即可

以对象的形式提供

options: {
  text: '我是二维码的内容',
  render: "canvas",
  width: 256,
  height: 256,
  typeNumber: -1,
  correctLevel: 2,
  background: "#ffffff",
  foreground: "#000000"
}

参数	含义	默认值
text	二维码中的内容	NA
render	渲染的方式，canvas或者table	canvas
width	二维码的宽度	256
height	二维码的高度	256
correctLevel	校正级	2
typeNumber	类型码	-1
background	背景色	#ffffff
foreground	前景色	#000000

你只需要提供options对象，就可以覆盖默认的配置。

注意

• options.text是一个必填字段，因为是二维码的内容来源。
• 请确保options的正确性，确保text字段中有数据然后再进行渲染
• 就像我下面的写法一样

<div v-qr="options" v-if="options" />

实例

了解更多

请前往Github上深入了解更多关于qrcode解析的原理

支持我

如果这个插件能帮到你，可以在vue-qrcode-directive给我一个star。

每一个star都是对我付出的认可