介绍

将一段文字或链接编码成图形，以便光学扫描仪或手机摄像头快速读取。

引入

import Qrcode from 'sard-uniapp/components/qrcode/qrcode.vue'

代码演示

基础使用

设置 text 属性即可渲染一个二维码图片。其内部通过 canvas 来绘制二维码，但最终的呈现是以图片的形式，因此可以覆盖任何东西在二维码上面。

<template>
  <sar-qrcode text="https://sard.wzt.zone/mobile/" />
</template>

呈现的大小

使用 size 属性设置二维码呈现的大小，可以设置为任意尺寸单位。

<template>
  <sar-qrcode text="https://sard.wzt.zone/mobile/" size="400rpx" />
</template>

自定义颜色

通过设置 color 自定义二维码暗模块颜色， 通过设置 bg-color 自定义二维码亮模块颜色，即背景颜色。

<template>
  <view>
    <sar-qrcode text="https://sard.wzt.zone/mobile/" color="#fd7e14" />

    <sar-qrcode
      root-style="margin-left: 20rpx"
      text="https://sard.wzt.zone/mobile/"
      bg-color="#91ffde"
    />
  </view>
</template>

默认插槽

使用默认插槽, 可以把任意内容放置在二维码上面。

<template>
  <sar-qrcode text="https://sard.wzt.zone/mobile/">
    <view class="icon">
      <sar-icon name="/static/logo.svg" size="64rpx" />
    </view>
  </sar-qrcode>
</template>

<style lang="scss" scoped>
.icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 8rpx;
}
</style>

添加图标 ^1.19.2+

使用 icon 属性, 可以将一张图片渲染到画布中间，与二维码合并为同一张图片。

vue lang="ts"

<template>
  <sar-qrcode
    text="https://sard.wzt.zone/mobile/"
    :icon="icon"
    show-menu-by-longpress
  ></sar-qrcode>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const icon = ref('/static/logo.png')

// #ifndef H5
icon.value = 'https://sard.wzt.zone/mobile/static/logo.png'
// #endif
</script>

vue lang="js"

<template>
  <sar-qrcode
    text="https://sard.wzt.zone/mobile/"
    :icon="icon"
    show-menu-by-longpress
  ></sar-qrcode>
</template>

<script setup lang="js">
import { ref } from "vue";
const icon = ref("/static/logo.png");
icon.value = "https://sard.wzt.zone/mobile/static/logo.png";
</script>

安静区域模块数

可以简单把设置 quiet-zone-modules 当成设置二维码内边距。

<template>
  <sar-qrcode text="https://sard.wzt.zone/mobile/" :quiet-zone-modules="4" />
</template>

错误纠错级别

错误纠错级别越高，二维码抗磨损、抗脏能力越强，同时二维码就越大，可容纳的字符容量越小。

ecl 属性用于设置错误纠错级别。

vue lang="ts"

<template>
  <sar-segmented v-model="ecl" :options="eclOptions" class="mb-20" />

  <sar-qrcode text="https://sard.wzt.zone/mobile/" :ecl="ecl" />
</template>

<script setup lang="ts">
import { type QrcodeECL } from 'sard-uniapp'
import { ref } from 'vue'

const eclOptions: QrcodeECL[] = ['L', 'M', 'Q', 'H']
const ecl = ref<QrcodeECL>('M')
</script>

vue lang="js"

<template>
  <sar-segmented v-model="ecl" :options="eclOptions" class="mb-20" />

  <sar-qrcode text="https://sard.wzt.zone/mobile/" :ecl="ecl" />
</template>

<script setup lang="js">
import { ref } from "vue";
const eclOptions = ["L", "M", "Q", "H"];
const ecl = ref("M");
</script>

下面是不同纠错级别的纠错能力表。

错误纠错级别	错误纠错能力
L	恢复 7%的数据
M	恢复 15%的数据
Q	恢复 25%的数据
H	恢复 30%的数据

API

QrcodeProps

属性	描述	类型	默认值
root-class	组件根元素类名	string	-
root-style	组件根元素样式	StyleValue	-
text	要编码的字符串数据	string	-
ecl	错误纠错级别	'L' | 'M' | 'Q' | 'H'	'M'
size	二维码呈现的大小	string	320rpx
color	二维码颜色	string	#000
bg-color	二维码背景颜色	string	#fff
quiet-zone-modules	安静区域模块数	number	2
show-menu-by-longpress 1.19.2+	长按图片显示菜单(微信小程序)	boolean	false
icon 1.19.2+	二维码中图片的地址	string	-

QrcodeSlots

插槽	描述	属性
default	自定义额外内容	-

QrcodeEmits

事件	描述	类型
success 1.25.1+	二维码图片绘制成功后触发，可用于获取临时文件路径	(tempFilePath: string) => void