t-qr

QR 二维码

组件介绍

纯UTS开发二维码组件，Canvas绘制，非WebView，无需引用原生依赖，无需安装自定义基座。

平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

基础用法

<template>
  <view class="qr-demo">
    <t-qr text="https://www.example.com" mode="rect"></t-qr>
    <t-qr text="Hello World" mode="circular"></t-qr>
    <t-qr text="https://www.example.com" mode="line"></t-qr>
  </view>
</template>

<style scoped>
.qr-demo {
  padding: 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30rpx;
}
</style>

Props

属性名	类型	默认值	说明	可选值
size	String	"medium"	组件尺寸	large, medium, small, mini
type	String	""	组件类型	info, primary, error, warning, success
disabled	Boolean	false	组件是否禁用	true, false
hover	Boolean	false	是否有点击效果	true, false
path	String	""	点击组件后跳转的页面路径	-
effect	String	"normal"	组件显示主题	normal, dark, light, plain
text	String	""	二维码内容	-
mode	String	"rect"	二维码显示的模式	line, circular, rect
logo	String	""	二维码中间的Logo图片	-

Mode 说明

模式值	说明	显示效果
line	线条模式	使用线条绘制二维码
circular	圆点模式	使用圆点绘制二维码
rect	矩形模式	使用矩形绘制二维码

Events

事件名	说明	回调参数
click	点击时触发	-
initFinished	组件初始化完成触发	CanvasContext

Methods

方法名	说明	参数	返回值
draw	重新绘制二维码	无	无
getImageData	获取二维码图片数据	无	ImageData