Input 输入框

用于字符输入的单行输入框。

基本用法

基础的单行输入框，可通过 defaultValue 设置默认值，通过 value 属性设置受控值，通过 @input 设置值改变时触发的操作：

无默认值

有默认值（非受控）

有固定值（受控）

一般用法

v-model 用法

<template>
  <h4>无默认值</h4>
  <i-input />
  <h4>有默认值（非受控）</h4>
  <i-input :defaultValue="currentVal" />
  <h4>有固定值（受控）</h4>
  <i-input :modelValue="currentVal" />
  <h4>一般用法</h4>
  <i-input :modelValue="currentVal" @input="handleInput" />
  <h4>v-model 用法</h4>
  <i-input v-model="currentVal" />
</template>

<script setup>
import { ref } from 'vue'
const currentVal = ref('iDesign')

const handleInput = (val, e) => {
  console.log(val, e)
  currentVal.value = val
}
</script>

禁用状态

通过 disabled 属性指定是否禁用输入框。

<template>
  <i-input disabled />
</template>

只读状态

通过 readonly 属性指定是否为只读状态。

<template>
  <i-input readonly />
</template>

聚焦全选

通过 selectAll 属性指定聚焦状态时自动全选。

<template>
  <i-input selectAll />
</template>

不同尺寸

通过 size 属性指定不同尺寸的输入框，默认为 medium。

<template>
  <i-input size="small" />
  <br />
  <i-input size="medium" />
  <br />
  <i-input size="large" />
</template>

不同状态

通过 status 属性指定不同状态的输入框，通过 tips 属性指定底部提示信息。

成功状态提示

警告状态提示

错误状态提示

<template>
  <i-input placeholder="成功状态" status="success" />
  <br />
  <i-input placeholder="警告状态" status="warning" />
  <br />
  <i-input placeholder="错误状态" status="error" />
  <br />
  <i-input placeholder="成功状态" status="success" tips="成功状态提示" />
  <i-input placeholder="警告状态" status="warning" tips="警告状态提示" />
  <i-input placeholder="错误状态" status="error" tips="错误状态提示" />
</template>

限制字数

通过 maxLength 属性指定最多可以输入的字符个数。

0 / 15

7 / 20

<template>
  <i-input :maxLength="15" />
  <br />
  <i-input v-model="currentVal" :maxLength="20" />
</template>

<script setup>
import { ref } from 'vue'
const currentVal = ref('iDesign')
</script>

密码输入框

通过将 type 属性指定为 password 切换为密码输入框。

<template>
  <i-input type="password" />
</template>

高级数字输入框

通过将 type 属性指定为 number 切换为数字滑块输入框：右侧显示数控按钮、悬浮左边缘出现鼠标数控滑块、可通过键盘上下键微调数值。

另外，可通过 speed 属性值设置滑块移动数值变化速率，通过 step 设置数值变化间隔，通过 precision 设置数值保留几位有效数字，通过 hideNumberBtn 设置隐藏数字输入框后缀按钮。

默认数字输入框

隐藏调整控件的数字输入框

受控且有最大最小值的数字输入框

受控且有最大最小值并锁定空值的数字输入框

慢速拖拽控件且有最大值的数字输入框

快速拖拽控件且有最小值的数字输入框

设置精度及数字间隔的数字输入框

带前后缀图标的数字输入框

<template>
  <h4>默认数字输入框</h4>
  <i-input type="number" />
  <h4>隐藏调整控件的数字输入框</h4>
  <i-input type="number" hideNumberBtn />
  <h4>受控且有最大最小值的数字输入框</h4>
  <i-input
    v-model="currentVal"
    type="number"
    :minNumber="1"
    :maxNumber="50"
  />
  <h4>受控且有最大最小值并锁定空值的数字输入框</h4>
  <i-input
    v-model="currentVal"
    type="number"
    :minNumber="1"
    :maxNumber="50"
    minNumberLock
  />
  <h4>慢速拖拽控件且有最大值的数字输入框</h4>
  <i-input
    placeholder="speed 设为 slow + 最大值 100"
    speed="slow"
    type="number"
    :maxNumber="100"
  />
  <h4>快速拖拽控件且有最小值的数字输入框</h4>
  <i-input
    placeholder="speed 设为 fast + 最小值 0"
    speed="fast"
    type="number"
    :minNumber="0"
  />
  <h4>设置精度及数字间隔的数字输入框</h4>
  <i-input
    placeholder="保留 2 位有效数字 + 间隔 0.5"
    type="number"
    :precision="2"
    :step="0.5"
    @input="handleInput"
  />
  <h4>带前后缀图标的数字输入框</h4>
  <i-input
    type="number"
    prefixIcon="TagCollection"
    suffixIcon="Search"
    @clickSuffixIcon="
      () => {
        alert('Search')
      }
    "
  />
</template>

<script setup>
import { ref } from 'vue'
const currentVal = ref('1')

const handleInput = (val, e) => {
  console.log(val, e)
}
</script>

带清空按钮的输入框

通过 clearable 属性或 @clear 显示清空按钮，实现一键清空输入框内容。

<template>
  <i-input clearable />
  <br />
  <i-input clearable @clear="handleClear" />
</template>

<script setup>
const handleClear = (e) => {
  console.log('clear', e)
}
</script>

带内置图标的输入框

通过 prefixIcon 或 suffixIcon 来指定输入框前后内置图标。

<template>
  <i-input prefixIcon="Search" />
  <br />
  <i-input suffixIcon="Calendar" />
  <br />
  <i-input clearable suffixIcon="Search" />
  <br />
  <i-input
    prefixIcon="Search"
    suffixIcon="Calendar"
    @clickPrefixIcon="clickIcon"
    @clickSuffixIcon="clickIcon"
  />
</template>

<script setup>
const clickIcon = (e) => {
  console.log(e)
}
</script>

组合输入框

通过 i-input-group 包裹不同内容组成单行的组合输入框，可结合 Grid 组件来控制宽度占比。

输入框 + 输入框

输入框 + 按钮

输入框 + 前后缀

http://

.com

<template>
  <h4>输入框 + 输入框</h4>
  <i-input-group>
    <i-input />
    <i-input />
  </i-input-group>
  <br />
  <i-input-group>
    <i-grid>
      <i-grid-item :width="120">
        <i-input />
      </i-grid-item>
      <i-grid-item>
        <i-input />
      </i-grid-item>
    </i-grid>
  </i-input-group>
  <br />
  <i-input-group>
    <i-grid>
      <i-grid-item :span="4">
        <i-input />
      </i-grid-item>
      <i-grid-item :span="8">
        <i-input />
      </i-grid-item>
      <i-grid-item :span="12">
        <i-input />
      </i-grid-item>
    </i-grid>
  </i-input-group>

  <h4>输入框 + 按钮</h4>
  <i-input-group>
    <i-input />
    <i-button :style="{ marginLeft: '10px' }">搜索</i-button>
  </i-input-group>

  <h4>输入框 + 前后缀</h4>
  <i-input-group>
    <i-input />
    <template #prefixContent>http://</template>
  </i-input-group>
  <br />
  <i-input-group>
    <i-input />
    <template #prefixContent>http://</template>
    <template #suffixContent>.com</template>
  </i-input-group>
  <br />
  <i-input-group @clickPrefix="handleClick" @clickSuffix="handleClick">
    <i-input />
    <template #prefixContent>
      <i-icon name="ShoppingCart" />
    </template>
    <template #suffixContent>
      <i-icon name="Search" />
    </template>
  </i-input-group>
</template>

<script setup>
const handleClick = (e) => {
  console.log(e)
}
</script>

触发事件

一系列的事件触发操作。

onInput 输入时触发

onFocus 聚焦时触发

onBlur 失焦时触发

onKeyDown 键盘按下时触发

onEnter 键盘按下回车时触发

onKeyUp 键盘释放时触发

onClear 清空按钮点击时触发

<template>
  <h4>onInput 输入时触发</h4>
  <i-input @input="handleUsual" />
  <h4>onFocus 聚焦时触发</h4>
  <i-input @focus="handleUsual" />
  <h4>onBlur 失焦时触发</h4>
  <i-input @blur="handleUsual" />
  <h4>onKeyDown 键盘按下时触发</h4>
  <i-input @keyDown="handleUsual" />
  <h4>onEnter 键盘按下回车时触发</h4>
  <i-input @enter="handleUsual" />
  <h4>onKeyUp 键盘释放时触发</h4>
  <i-input @keyUp="handleUsual" />
  <h4>onClear 清空按钮点击时触发</h4>
  <i-input clearable @clear="handleUsual" />
</template>

<script setup>
const handleUsual = (val, e) => {
  console.log(val, e)
}
</script>

Input Attributes

属性	说明	类型	默认值
placeholder	占位符	`string`	`请输入`
modelValue / v-model	输入框受控值	`string〡number`	`--`
defaultValue	输入框默认值	`string〡number`	`--`
disabled	是否禁用输入框	`boolean`	`false`
readonly	输入框是否只读	`boolean`	`false`
hideNumberBtn	是否隐藏数字输入框后缀按钮	`boolean`	`false`
selectAll	是否聚焦时全选	`boolean`	`false`
size	输入框尺寸	`"small"〡"medium"〡"large"`	`medium`
status	输入框状态	`"success"〡"warning"〡"error"`	`--`
tips	输入框底部提示	`string`	`--`
maxLength	用户最多可以输入的字符个数	`number`	`--`
clearable	是否可清空	`boolean`	`false`
type	输入框类型	`"number"〡"text"〡"password"`	`text`
speed	数字输入框滑块数值变化速率	`"slow"〡"default"〡"fast"`	`default`
maxNumber	数字输入框最大值	`number`	`--`
minNumber	数字输入框最小值	`number`	`--`
minNumberLock	数字输入框清空值时是否转为最小值	`boolean`	`false`
precision	数字输入框保留几位小数	`number`	`0`
step	数字输入框数值变化间隔	`number`	`1`
prefixIcon	组件前置图标名	`string`	`--`
suffixIcon	组件后置图标名	`string`	`--`
prefixIconClass	组件前置图标类名	`string`	`--`
suffixIconClass	组件后置图标类名	`string`	`--`

Input Events

属性	说明	类型	默认值
input	输入框值发生变化时触发	`(value: string, ev?: Event) => void`	`--`
focus	输入框聚焦时触发	`(value: string, ev?: Event) => void`	`--`
blur	输入框失焦时触发	`(value: string, ev?: Event) => void`	`--`
keyDown	键盘按下时触发	`(value: string, ev?: Event) => void`	`--`
enter	键盘按下回车键时触发	`(value: string, ev?: Event) => void`	`--`
keyUp	释放键盘时触发	`(value: string, ev?: Event) => void`	`--`
clear	清空按钮点击时触发	`(ev?: MouseEvent) => void`	`--`
move	数字输入框移动滑块时触发	`(value: string, ev?: Event) => void`	`--`
moveUp	数字输入框滑块失焦时触发	`(value: string) => void`	`--`
clickPrefixIcon	点击前置图标触发事件	`(ev?: MouseEvent) => void`	`--`
clickSuffixIcon	点击后置图标触发事件	`(ev?: MouseEvent) => void`	`--`

InputGroup Slots

插槽名	说明
prefixContent	输入框组合前缀
suffixContent	输入框组合后缀

InputGroup Events

属性	说明	类型	默认值
clickPrefix	点击前缀触发事件	`(ev: MouseEvent) => void`	`--`
clickSuffix	点击后缀触发事件	`(ev: MouseEvent) => void`	`--`

# Input 输入框

# 基本用法