Appearance

iuiDesign
100%
02:32
本页目录

用于单行文本信息输入。

基本使用 ​

通过 label 属性来配置输入框的标题，placeholder 属性来配置输入框的提示信息。

html
<iui-input label="Nickname" placeholder="Please enter nickname"></iui-input>
<iui-input label="Nickname" placeholder="Please enter nickname"></iui-input>

禁用状态 ​

通过 disabled 属性来配置输入框的禁用状态。

html
<iui-input
  label="Nickname"
  placeholder="Please enter nickname"
  disabled
></iui-input>
<iui-input
  label="Nickname"
  placeholder="Please enter nickname"
  disabled
></iui-input>

字数限制 ​

通过 maxlength 属性来配置输入框的最大输入字数。

html
<iui-input
  :maxlength="10"
  label="Title Text"
  placeholder="Up to 10 characters"
/>

<!-- 通过 suffix 插槽，可以配合字数显示 -->
<iui-input
  v-model="inputValue"
  :maxlength="10"
  label="Title Text"
  placeholder="Up to 10 characters"
>
  <template #suffix>
    <view style="color: #ccc; font-size: 15px">
      {{ inputValue.length }}/10
    </view>
  </template>
</iui-input>
<iui-input
  :maxlength="10"
  label="Title Text"
  placeholder="Up to 10 characters"
/>

<!-- 通过 suffix 插槽，可以配合字数显示 -->
<iui-input
  v-model="inputValue"
  :maxlength="10"
  label="Title Text"
  placeholder="Up to 10 characters"
>
  <template #suffix>
    <view style="color: #ccc; font-size: 15px">
      {{ inputValue.length }}/10
    </view>
  </template>
</iui-input>

标签图标 ​

通过 icon 属性来配置输入框的标签图标。

html
<iui-input
  label="Nickname"
  placeholder="Please enter nickname"
  clearable
  icon="user"
>
</iui-input>
<iui-input
  label="Nickname"
  placeholder="Please enter nickname"
  clearable
  icon="user"
>
</iui-input>

右侧内容 ​

通过 suffix 插槽来配置输入框的右侧内容。

html
<iui-input
  label="Verification code"
  placeholder="Enter code"
  clearable
  type="number"
>
  <template #suffix>
    <iui-button shape="circle" inline type="primary">Send</iui-button>
  </template>
</iui-input>
<iui-input
  label="Verification code"
  placeholder="Enter code"
  clearable
  type="number"
>
  <template #suffix>
    <iui-button shape="circle" inline type="primary">Send</iui-button>
  </template>
</iui-input>

特殊输入格式 ​

特殊输入格式可以限制用户输入的内容，通过 type 属性来配置输入框的输入格式。

html
<!-- 数字输入 -->
<iui-input placeholder="0.00" clearable type="number">
  <template #prefix>
    <text style="font-weight: 600; font-size: 22px">¥</text>
  </template>
</iui-input>

<!-- 密码输入 -->
<iui-input
  label="Password"
  placeholder="Please enter password"
  clearable
  type="password"
>
</iui-input>
<!-- 数字输入 -->
<iui-input placeholder="0.00" clearable type="number">
  <template #prefix>
    <text style="font-weight: 600; font-size: 22px">¥</text>
  </template>
</iui-input>

<!-- 密码输入 -->
<iui-input
  label="Password"
  placeholder="Please enter password"
  clearable
  type="password"
>
</iui-input>

错误校验 ​

input 的组件可以单独使用校验规则，也可以配合 form 组件使用校验规则。

html
<iui-input
  label="Nickname"
  placeholder="Please enter nickname"
  required
  :rules="rules"
></iui-input>

<script setup>
  import { ref } from "vue";

  const rules = {
    type: "string",
    required: true,
    message: "Nickname is required",
    trigger: "blur",
  };
</script>
<iui-input
  label="Nickname"
  placeholder="Please enter nickname"
  required
  :rules="rules"
></iui-input>

<script setup>
  import { ref } from "vue";

  const rules = {
    type: "string",
    required: true,
    message: "Nickname is required",
    trigger: "blur",
  };
</script>

API ​

<Input>props
参数描述类型默认值
modelValue (v-model)当前输入的值String | Number-
label输入框左侧标签String-
icon标签左侧图标String-
placeholder输入框占位提示文字String-
disabled是否禁用输入框Booleanfalse
readonly是否只读Booleanfalse
clearable是否可清空Booleanfalse
maxlength最大输入长度Number-
type输入框类型text | number | idcard | digit | safe-password | tel | nickanme，详见uniapp说明文档text
required显示必填星号，没有校验功能Booleanfalse
rules校验规则Array-
focus获取焦点Booleanfalse
confirmType设置键盘右下角按钮的文字，仅在type='text'时生效"go"-前往 "next"-下一个 "done"-完成 "search"-搜索 "send"-发送done
align输入框内容对齐方式left | center | rightleft
direction标签与输入框排列方向horizontal | verticalhorizontal
<Input>events
事件名描述参数
input输入框内容变化时触发e: Event
focus输入框聚焦时触发e: Event
blur输入框失去焦点时触发e: Event
confirm点击完成按钮时触发e: Event
keyboardheightchange键盘高度发生变化时触发e: Event
<Input>slots
插槽名描述参数
prefix输入框前缀-
suffix输入框后缀-
error错误提示校验规则中的 message: String