• 简体中文

      • ScanInput

      ScanInput 是带扫码按钮的 Antd Input。点击按钮后，优先调用移动端 window.JsBridge.invoke({ action: 'scan' })；如果没有 JSBridge，则打开浏览器摄像头扫码界面。

      基本用法

      Current value: -
      import React, { useState } from 'react';
import { ScanInput } from '@nocobase/client-v2';
import { Space, Typography } from 'antd';

export default function ScanInputDemo() {
  const [value, setValue] = useState('');

  return (
    <Space direction="vertical" style={{ width: 360 }}>
      <ScanInput
        value={value}
        placeholder="Scan or input code"
        onChange={(next) => {
          if (typeof next === 'string') {
            setValue(next);
          } else {
            setValue(next.target.value);
          }
        }}
      />
      <Typography.Text type="secondary">
        Current value: {value || '-'}
      </Typography.Text>
    </Space>
  );
}

      在表单里使用：

      import { ScanInput } from '@nocobase/client-v2';

<Form.Item name="code" label={t('Code')}>
  <ScanInput placeholder={t('Scan or input code')} />
</Form.Item>;

      API

      参数类型默认值说明
      disableManualInputbooleanfalse是否禁用手动输入，开启后输入框只读
      enableScanboolean-保留参数，当前组件始终渲染扫码按钮
      formatsToSupportHtml5QrcodeSupportedFormats[]内置常用二维码和条形码格式限定识别格式
      onChange(value: string | ChangeEvent<HTMLInputElement>) => void-扫码成功时传字符串，手动输入时传原始事件

      其他参数继承 Antd Input。

      注意

      浏览器扫码依赖摄像头权限和 HTTPS 环境。本地调试或移动端 WebView 中遇到权限问题时，优先检查浏览器权限、协议和 JSBridge 注入情况。

      相关链接