AOYA-UI

# Input 输入框

Input 为受控组件，它总会显示 Vue 绑定值。

通常情况下，应当处理 input 事件，并更新组件的绑定值（或使用v-model）。否则，输入框内显示的值将不会改变。

不支持 v-model 修饰符。

# 基础用法

  <ay-input v-model="input" placeholder="请输入内容"></ay-input>

# 禁用状态

TIP

通过 disabled 属性指定是否禁用 input 组件

  <ay-input v-model="input" placeholder="请输入内容" disabled></ay-input>

# 可清空

TIP

通过 clearable 属性指定是否禁用 input 组件

  <ay-input v-model="input" placeholder="请输入内容" clearable></ay-input>

# 密码框

TIP

使用show-password属性即可得到一个可切换显示隐藏的密码框

  <ay-input v-model="input" placeholder="请输入内容" show-password></ay-input>

# 带 icon 的输入框

带有图标标记输入类型

TIP

可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。

<div class="demo-input-suffix">
  属性方式：
  <ay-input
    placeholder="请选择日期"
    suffix-icon="ay-icon-date"
    v-model="input1"
  >
  </ay-input>
  <ay-input
    placeholder="请输入内容"
    prefix-icon="ay-icon-search"
    v-model="input2"
  >
  </ay-input>
</div>
<div class="demo-input-suffix">
  slot 方式：
  <ay-input placeholder="请选择日期" v-model="input3">
    <i slot="suffix" class="ay-input__icon ay-icon-date"></i>
  </ay-input>
  <ay-input placeholder="请输入内容" v-model="input4">
    <i slot="prefix" class="ay-input__icon ay-icon-search"></i>
  </ay-input>
</div>

.....

# Input Attributes

参数 说明 类型 可选值 默认值
type 类型 string text，textarea 和其他 原生 input 的 type 值 (opens new window) text
value / v-model 绑定值 string / number — —
maxlength 原生属性，最大输入长度 number — —
minlength 原生属性，最小输入长度 number — —
show-word-limit 是否显示输入字数统计，只在 type = "text" 或 type = "textarea" 时有效 boolean — false
placeholder 输入框占位文本 string — —
clearable 是否可清空 boolean — false
show-password 是否显示切换密码图标 boolean — false
disabled 禁用 boolean — false
size 输入框尺寸，只在 type!="textarea" 时有效 string medium / small / mini —
prefix-icon 输入框头部图标 string — —
suffix-icon 输入框尾部图标 string — —
rows 输入框行数，只对 type="textarea" 有效 number — 2
autosize 自适应内容高度，只对 type="textarea" 有效，可传入对象，如，{ minRows: 2, maxRows: 6 } boolean / object — false
autocomplete 原生属性，自动补全 string on, off off
auto-complete 下个主版本弃用 string on, off off
name 原生属性 string — —
readonly 原生属性，是否只读 boolean — false
max 原生属性，设置最大值 — — —
min 原生属性，设置最小值 — — —
step 原生属性，设置输入字段的合法数字间隔 — — —
resize 控制是否能被用户缩放 string none, both, horizontal, vertical —
autofocus 原生属性，自动获取焦点 boolean true, false false
form 原生属性 string — —
label 输入框关联的label文字 string — —
tabindex 输入框的tabindex string - -
validate-event 输入时是否触发表单的校验 boolean - true

# Input Slots

name 说明
prefix 输入框头部内容，只对 type="text" 有效
suffix 输入框尾部内容，只对 type="text" 有效
prepend 输入框前置内容，只对 type="text" 有效
append 输入框后置内容，只对 type="text" 有效

# Input Events

事件名称 说明 回调参数
blur 在 Input 失去焦点时触发 (event: Event)
focus 在 Input 获得焦点时触发 (event: Event)
change 仅在输入框失去焦点或用户按下回车时触发 (value: string | number)
input 在 Input 值改变时触发 (value: string | number)
clear 在点击由 clearable 属性生成的清空按钮时触发 —

# Input Methods

方法名 说明 参数
focus 使 input 获取焦点 —
blur 使 input 失去焦点 —
select 选中 input 中的文字 —

# Autocomplete Attributes

参数 说明 类型 可选值 默认值
placeholder 输入框占位文本 string — —
disabled 禁用 boolean — false
value-key 输入建议对象中用于显示的键名 string — value
value 必填值，输入绑定值 string — —
debounce 获取输入建议的去抖延时 number — 300
placement 菜单弹出位置 string top / top-start / top-end / bottom / bottom-start / bottom-end bottom-start
fetch-suggestions 返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它 Function(queryString, callback) — —
popper-class Autocomplete 下拉列表的类名 string — —
trigger-on-focus 是否在输入框 focus 时显示建议列表 boolean — true
name 原生属性 string — —
select-when-unmatched 在输入没有任何匹配建议的情况下，按下回车是否触发 select 事件 boolean — false
label 输入框关联的label文字 string — —
prefix-icon 输入框头部图标 string — —
suffix-icon 输入框尾部图标 string — —
hide-loading 是否隐藏远程加载时的加载图标 boolean — false
popper-append-to-body 是否将下拉列表插入至 body 元素。在下拉列表的定位出现问题时，可将该属性设置为 false boolean - true
highlight-first-item 是否默认突出显示远程搜索建议中的第一项 boolean — false

# Autocomplete Slots

name 说明
prefix 输入框头部内容
suffix 输入框尾部内容
prepend 输入框前置内容
append 输入框后置内容

# Autocomplete Scoped Slot

name 说明
— 自定义输入建议，参数为 { item }

# Autocomplete Events

事件名称 说明 回调参数
select 点击选中建议项时触发 选中建议项
change 在 Input 值改变时触发 (value: string | number)

# Autocomplete Methods

方法名 说明 参数
focus 使 input 获取焦点 -

← Switch 选择器 →