跳到主要内容

Input 输入框

介绍​

表单输入组件，支持单行、多行输入。

用法​

普通​

有标题​

const [v1, setV1] = useState("186");
<OsInput
  label='标题'
  placeholder='默认文案'
  placeholderStyle='color: #7f7f7f;'
  value={v1}
  onChange={(v) => {
    setV1(v);
  }}
></OsInput>

没有标题​

const [v2, setV2] = useState("186");
<OsInput
  placeholder='默认文案'
  placeholderStyle='color: #7f7f7f;'
  value={v2}
  onChange={(v) => {
    setV2(v);
  }}
></OsInput>

银行卡​

const [v7, setV7] = useState("662712399");
<OsInput
  type='bankcard'
  placeholder='银行行卡/礼品卡号'
  value={v7}
  onChange={(v) => {
    setV7(v);
  }}
></OsInput>

密码输入框​

const [v8, setV8] = useState("662712");
<OsInput
  type='password'
  placeholder='请输入密码'
  value={v8}
  onChange={(v) => {
    setV8(v);
  }}
></OsInput>

数字输入框​

const [v4, setV4] = useState("123");
<OsInput
  type='number'
  placeholder='请输入数字'
  value={v4}
  onChange={(v) => {
    setV4(v);
  }}
></OsInput>

多行输入​

const [v3, setV3] = useState(
  "网易严选秉承网易一贯的严谨态度，深入世界各地，严格把关所有商品的产地"
);
<OsInput
  type='textarea'
  placeholder='请输入文本'
  value={v3}
  onChange={(v) => {
    setV3(v);
  }}
  countDown
  maxLength={200}
></OsInput>

不可编辑​

const [v5, setV5] = useState("不可编辑的input");
const [v6, setV6] = useState("不可编辑的textarea");
<OsInput
  label='标题'
  placeholder='请输入文本'
  value={v5}
  onChange={(v) => {
    setV5(v);
  }}
  isReadonly
></OsInput>
<OsInput
  label='标题'
  placeholder='请输入文本'
  value={v5}
  onChange={(v) => {
    setV5(v);
  }}
  isDisabled
></OsInput>
<OsInput
  type='textarea'
  label='标题'
  placeholder='请输入文本'
  value={v6}
  onChange={(v) => {
    setV6(v);
  }}
  countDown
  isDisabled
></OsInput>

API​

属性​

参数说明类型默认值
type输入框类型，可选text | number | password | bankcard | textareatext
value表单值，可选string-
placeholderplaceholder，可选string-
placeholderStyleplaceholder样式，只支持小程序，可选string-
placeholderClassplaceholder样式类，可选string-
label表单说明，可选string-
maxLength最大字符数，可选number500
isReadonly是否可编辑，可选booleanfalse
isDisabled表单是否失效，可选booleanfalse
disabledClear是否隐藏一键删除按钮，可选booleanfalse
showSplitLine是否展示底部分割线，当type为bankcard时无效，可选booleantrue
countDown是否显示字符计数器，textarea有效，可选booleanfalse

方法​

函数名说明参数
onChange表单值变化时调用，可选表单值
onFocus表单聚焦时调用，可选事件对象
onBlur表单值失焦时调用，可选事件对象