Tui Plus Vapor

Appearance

# t-qr

QR 二维码

t-qr 组件介绍 ​

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

t-qr 平台兼容 ​

HarmonyH5AndroidiOS小程序UTS
✅✅✅✅✅✅

t-qr 基础用法 ​

vue
<template>
	<view class="p-15">
		<tui-theme-switch></tui-theme-switch>
		<t-card class="r-10 mb-15"
				title="Qrcode 二维码"
				sub-title="纯UTS编写二维码组件,canvas绘制,非webview,无需引用原生依赖 无需安装自定义基座"></t-card>
		<view :class="[`fc tvg mb-15 ptb-30 trl`]">
			<t-qr class="twh-250"
				  type='success'
				  :text="qrstr"
				  :mode="currentMode"
				  :shape="currentShape"
				  ref="qrins"
				  :logo="logo"></t-qr>
		</view>
		<t-card title="模式"
				class="mb-15">
			<t-radio-group :class="[`fl fww tvg`]"
						   v-model="currentMode"
						   type="success"
						   icon="radio-button-fill"
						   mode="radio"
						   :transition="true">
				<t-radio value="rect">实心方块</t-radio>
				<t-radio value="dot">圆点</t-radio>
				<t-radio value="line">横线</t-radio>
				<t-radio value="vline">竖线</t-radio>
				<t-radio value="smallRect">小方块</t-radio>
			</t-radio-group>
		</t-card>
		<t-card title="定位区形状" 	class="mb-15">
			<t-radio-group :class="[`fl fww tvg`]"
						   v-model="currentShape"
						   :size="radio_size"
						   type="primary"
						   icon="radio-button-fill"
						   mode="radio"
						   :transition="true">
				<t-radio value="square">方形</t-radio>
				<t-radio value="circle">圆形</t-radio>
			</t-radio-group>
		</t-card>
		<t-row class="ptb-15">
			<t-button class="f mr-10"
					  @click="logo='/static/image/dcloud.png'"
					  type="success">添加logo</t-button>
			<t-button class="f"
					  type="error"
					  @click="logo=''">移除logo</t-button>
		</t-row>
		<t-row class="pb-15">
			<t-button class="f mr-10"
					  @click="takeSnapshot"
					  type="warning">保存为图片</t-button>
			<t-button type="primary"
					  class="f"
					  @click="test">更新数据</t-button>
		</t-row>
	</view>
</template>

<script setup>
	import { TuiGuid } from '@/uni_modules/tui-common';

	const qrstr = ref('欢迎使用Tui')
	const logo = ref<string>('static/images/dcloud.png')
	const qrins = ref<TQrComponentPublicInstance | null>(null)

	// 当前选中的 mode 和 shape
	const currentMode = ref<string>('rect')
	const currentShape = ref<string>('square')

	// radio 组通用配置（可自定义）
	const radio_size = ref<string>('medium')

	function test() {
		qrstr.value = TuiGuid(20)
	}

	function takeSnapshot() {
		qrins.value?.toDataURL()?.then((url : string) => {
			uni.previewImage({
				urls: [url] as string[]
			})
		})
	}
</script>

t-qr Props ​

属性名类型默认值说明可选值
sizeString"medium"组件尺寸large, medium, small, mini
typeString""组件类型info, primary, error, warning, success
disabledBooleanfalse组件是否禁用true, false
hoverBooleanfalse是否有点击效果true, false
pathString""点击组件后跳转的页面路径-
effectString"normal"组件显示主题normal, dark, light, plain
textString""二维码内容-
modeString"rect"二维码显示的模式line, circular, rect
logoString""二维码中间的Logo图片-

Mode 说明 ​

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

t-qr Events ​

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

Methods ​

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