Scan 扫码

该组件可以集成到应用中，提供实时的扫码功能，适用于多种扫码场景。

<template>
	<t-page title='自定义相机' class="p.30">
		<t-card class="mb.30" title="tui-scan扫码" sub-title="支持自定义插槽自定义扫码布局,使用插槽后遮罩层不会渲染">
		</t-card>
		<t-scan v-if="show" ref="scancodeEle" class="h.600-mb.30-tdr" @scanned="scanned" :mode="mode" :mask="mask"
			type='p'>
			<!-- <t-col class="da-twh.100%-ba-fc">
				<t-text>插槽测试</t-text>
			</t-col> -->
		</t-scan>
		<t-button class="mb.30" @click="switchs">{{mode=='qr'?'扫条形码':'扫二维码'}}</t-button>
		<t-button class="mb.30" @click="closeMask">{{mask?'关闭':'打开'}}遮罩层</t-button>
		<t-button class="mb.30" @click="photo">图片识别</t-button>
	</t-page>
</template>

<script setup>
	import { ScanResult } from '@/uni_modules/tui-scan'
	const scancodeEle = ref<TScanComponentPublicInstance | null>(null)
	const show = ref(true)
	const mode = ref('bar')
	const mask = ref(true)
	function closeMask() {
		mask.value = !mask.value
		show.value = false
		nextTick(() => {
			show.value = true
		})
	}
	function switchs() {
		show.value = false
		nextTick(() => {
			if (mode.value == 'bar') {
				mode.value = 'qr'
			} else {
				mode.value = 'bar'
			}
			show.value = true
		})
	}
	function photo() {
		uni.chooseImage({
			count: 1,
			success: (res) => {
				const path = res.tempFilePaths[0]
				let el = scancodeEle.value as TScanComponentPublicInstance
				el.scanImageByURI(path)
			}, fail: (err) => {
				console.log("err: ", JSON.stringify(err));
			}
		})
	}
	function scanned(e : ScanResult) : void {
		uni.showModal({
			title: e.data[0].value,
			success: (_) => {
				let el = scancodeEle.value as TScanComponentPublicInstance
				el.rescan()
			}
		})
	}
</script>

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

Props

名称	描述	类型	默认值
mode	扫描模式	String	'qr'
rectColor	矩形颜色	String	''
lineColor	线条颜色	String	''
lineHeight	线条高度	Number	2
mask	是否显示遮罩	Boolean	true

Methods

名称	描述
rescan	重新开始扫描
scanImageByURI	通过URI扫描图片
maskCanvasInit	初始化遮罩Canvas
drawMask	绘制遮罩
drawScannerLine	绘制扫描线

Events

名称	描述	参数
scanned	当扫描到结果时触发	result