Input 输入框

Input 输入框

单行输入框

基本输出框，默认宽度 100%

<at-input v-model="inputValue" placeholder="输入提示"></at-input>
<at-input v-model="inputValue" placeholder="禁用状态" disabled></at-input>
<at-input v-model="password" type="password" placeholder="密码"></at-input>

带状态的单行输入框

添加属性 status ，表示不同含义的输入框，只是颜色上的变化，不影响按钮逻辑。默认提供四种状态：success，error，warning，info

<at-input v-model="inputValue2" placeholder="success" status="success" icon="check-circle"></at-input>
<at-input v-model="inputValue2" placeholder="error" status="error" icon="x-circle"></at-input>
<at-input v-model="inputValue2" placeholder="warning" status="warning" icon="alert-circle"></at-input>
<at-input v-model="inputValue2" placeholder="info" status="info" icon="info"></at-input>

带图标的输入框

添加属性 icon ，在输入框后面显示提示性的图标。icon 属性值为图标的类名，具体请查阅 品牌/图标 章节

<at-input v-model="inputValue3" placeholder="请输入链接" icon="link"></at-input>

前置 / 后置标签型输入框

设置 slot="prepend" 或者 slot="append" ，可自定义复合型输入框

<at-input v-model="inputValue4" placeholder="请输入内容">
  <template slot="prepend">
    <span>Https://</span>
  </template>
</at-input>
<at-input v-model="inputValue4" placeholder="请输入内容" size="small">
  <template slot="append">
    <span>@aotu.io</span>
  </template>
</at-input>
<at-input v-model="inputValue4" placeholder="请输入内容">
  <template slot="prepend">
    <i class="icon icon-link"></i>
  </template>
</at-input>
<at-input v-model="inputValue4" placeholder="请输入内容" prepend-button>
  <template slot="prepend">
    <span>搜索</span>
  </template>
</at-input>
<at-input v-model="inputValue4" placeholder="请输入内容" append-button>
  <template slot="append">
    <span>搜索</span>
  </template>
</at-input>
<at-input v-model="inputValue4" placeholder="请输入内容" prepend-button>
  <template slot="prepend">
    <i class="icon icon-search"></i>
  </template>
</at-input>
<at-input v-model="inputValue4" placeholder="请输入内容" append-button>
  <template slot="append">
    <i class="icon icon-search"></i>
  </template>
</at-input>

不同尺寸

设置属性 size 指定输入框的尺寸，支持三种尺寸：large，normal，small

<at-input v-model="inputValue" size="large" placeholder="大尺寸"></at-input>
<at-input v-model="inputValue" placeholder="正常尺寸"></at-input>
<at-input v-model="inputValue" size="small" placeholder="小尺寸"></at-input>

Input 参数

参数	说明	类型	可选值	默认值
type	输入框类型，原生属性	String	-	-
name	原生属性	String	-	-
value	绑定的值	String / Number	-	-
placeholder	占位文本（原生属性）	String	-	-
disabled	是否禁用（原生属性）	Boolean	-	false
readonly	是否只读（原生属性）	Boolean	-	false
maxlength	最大长度（原生属性）	Number	-	-
minlength	最小长度（原生属性）	Number	-	-
max	最大值（原生属性）	Number	-	-
min	最小值（原生属性）	Number	-	-
autofocus	是否自动获取焦点（原生属性）	Boolean	-	false
size	输入框尺寸	String	`small`, `normal`, `large`	normal
status	输入框类型	String	success, error, warning, info	-
prependButton	前置元素是否包含可点击的按钮，用于复合型输入框	Boolean	-	false
appendButton	后置元素是否包含可点击的按钮，用于复合型输入框	Boolean	-	false

Input slot

名称	说明
prepend	前置内容，仅在 text 类型下有效
append	后置内容，仅在 text 类型下有效

Input 事件

事件名称	说明	返回参数
focus	获得焦点时触发	event
blur	失去焦点时触发	event

Input输入框