input 输入框

import { Input } from 'feui';
components: {
  [Input.name]: Input
}

代码演示

基础用法

<fe-group>
  <fe-input title='value' v-model="value" placeholder="我是占位符"></fe-input>
</fe-group>

不可用状态

<fe-group title="不可用状态">
  <fe-input title='value' disabled v-model="disabledValue"></fe-input>
</fe-group>

设置最大值最小值

<fe-group title="set min=2 and max=5">
  <fe-input title="2-5个字符" placeholder="" :min="2" :max="5"></fe-input>
</fe-group>

设置is-type属性

<fe-group title="请输入姓名">
  <fe-input title="姓名" name="username" placeholder="请输入姓名" 
    is-type="china-name">
  </fe-input>
</fe-group>
<fe-group title="设置 keyboard=number,is-type=china-mobile">
  <fe-input title="手机号码" name="mobile" placeholder="请输入手机号码" 
    keyboard="number" is-type="china-mobile">
  </fe-input>
</fe-group>
<fe-group title="set is-type=email">
  <fe-input title="邮箱" name="email" placeholder="请输入邮箱地址" 
    is-type="email">
  </fe-input>
</fe-group>
<fe-group title="is-type传入function">
  <fe-input title="输入验证" :is-type="be2333" placeholder="必须输入2333"></fe-input>
</fe-group>

不显示清除按钮

<fe-group title="不显示清除按钮">
  <fe-input title="message" required placeholder="我是可爱的占位符" 
    :show-clear="false" autocapitalize="characters">
  </fe-input>
</fe-group>

使用icon代替title

<fe-group title="使用icon代替title">
  <fe-input title="必须输入2333" :is-type="be2333" placeholder="必须输入2333">
    <img slot="label" style="padding-right:10px;display:block;" 
    src="http://temp.im/42x42/34AADC/fff" width="24" height="24">
  </fe-input>
</fe-group>

输入格式化

<fe-group title="mask">
  <fe-input title="手机号码格式化" mask="999 9999 9999" 
    v-model="maskValue" :max="13" is-type="china-mobile">
  </fe-input>
  <fe-cell title="value" :value="maskValue"></fe-cell>
  <fe-input title="(99) 9-999" mask="(99) 9-999"  v-model="maskValue2" 
    :max="10" placeholder="76幢1单元305">
  </fe-input>
</fe-group>

API

Slots

Events

Methods