二维码扫描 useQrCodeScanner

更新: 2025/1/9 字数: 0 字 时长: 0 分钟

基本使用

useQrCodeScanner用来调用二维码/条形码扫描器。

调用二维码扫描器

scanQrCode用来调用二维码扫描器，扫描后的结果会在codeResult中返回。

import { useQrCodeScanner } from "@/hooks";
const { codeResult, scanQrCode } = useQrCodeScanner();

点击查看示例代码

<script setup lang="ts">
import { useQrCodeScanner } from "@/hooks";
const { codeResult, scanQrCode } = useQrCodeScanner();
</script>
<template>
  <div class="p-16">
    <van-button icon="scan" @click="scanQrCode"> 扫一扫 </van-button>
    <div class="data-content bg-white dark:bg-[--van-background-2]">
      <van-field
        v-if="codeResult"
        v-model="codeResult"
        rows="1"
        autosize
        readonly
        type="textarea"
        placeholder=""
      />
      <VanEmpty
        v-else
        description="点击扫一扫按钮，获取扫描二维码或条形码后的结果"
      />
    </div>
  </div>
</template>

API

返回值、方法

返回值、方法	说明	类型
codeResult	扫描后的结果，默认为空	string
scanQrCode	调用二维码扫描器	() => void