更新记录

2.0.1（2025-06-02） 下载此版本

• 修改文档

2.0（2025-06-02） 下载此版本

适配tui-plus-v3 完善增加各端支持。

1.0.1.5（2024-12-20） 下载此版本

• 适配4.42

平台兼容性

云端兼容性

uni-app(4.66)

uni-app x(4.66)

Scan 扫码

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

<template>
    <t-page main-class="p-30">
        <t-card main-class="mb-30" title="tui-scan扫码" sub-title="支持自定义插槽自定义扫码布局,使用插槽记得设置:mask='false'">
        </t-card>
        <t-scan v-if="show" ref="scancodeEle" :isPreviewing="isPreviewing" main-class="h-600 mb-30 tdr"
            @scanned="scanned" :mode="mode" :mask="mask" type='p'>
            <!-- <t-col main-class="da-twh-100%-ba-fc">
                <t-text>插槽测试-使用插槽记得设置:mask='false'</t-text>
            </t-col> -->
        </t-scan>
        <t-button main-class="mb-30" @click="switchs">{{mode=='qr'?'扫条形码':'扫二维码'}}</t-button>
        <t-button main-class="mb-30" @click="closeMask">{{mask?'关闭':'打开'}}遮罩层</t-button>
        <t-button main-class="mb-30" @click="open">开启扫描</t-button>
        <t-button main-class="mb-30" @click="isPreviewing=!isPreviewing">{{isPreviewing?'关闭相机预览':'打开相机预览'}}</t-button>
        <t-button main-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 isPreviewing = ref(true)
    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() {
        let el = scancodeEle.value as TScanComponentPublicInstance
        el.scanImage()
    }
    function open() {
        let el = scancodeEle.value as TScanComponentPublicInstance
        el.rescan()
    }
    function scanned(e : ScanResult) : void {
        uni.showModal({
            title: e.data[0].value,
            success: (_) => {

            }
        })
    }
</script>

事件

属性 (Props)

注意: 组件本身继承自 TuiMixin，因此也具备 TuiMixin 提供的通用属性，如 size, disabled, stop, hover, path, mainClass, nativeClass, effect 等。请参考 TUI 文档了解这些通用属性的具体用法。

方法

插槽

注意事项

1. 插槽使用: 如果通过插槽自定义了扫描布局，请确保将 mask 属性设置为 false，并将 isPreviewing 设置为 false，以避免默认的扫描框和遮罩层与自定义内容冲突。
2. 图片扫描: scanImage 方法在不同平台实现不同。在微信小程序中直接调用特定方法，在其他平台则通过 uni.chooseImage 选择图片后传递路径。
3. 动画控制: 组件内部使用了 TuiRequestAnimationFrame 和 TuiCancelAnimationFrame 来控制扫描线的动画，确保在组件销毁时正确取消动画任务（已在 mounted 钩子中处理）。
4. 依赖: 此组件依赖于 @uni_modules/tui-plugins 和 @uni_modules/tui-plus-v3 中的特定模块，请确保项目中已正确安装和引入这些依赖。

相关链接

• TUI 扫码组件文档: https://life.yundie.xyz/tui3.0/docs/component/t-scan.html
• 示例页面: /pagesA/native/scan/scan