## Input组件
`input`或`textarea`的输入框

### Import
```js
import { Input } from 'bxs-ui-vue';
```

### Example

#### 基本用法
```html
<!-- 无标题 -->
<bxs-input
  type="text"
  placeholder="请输入内容"
  v-model="username"
/>
<!-- 普通文本 -->
<bxs-input
  label="文本"
  type="text"
  placeholder="请输入内容"
  v-model="username"
/>
<!-- 普通数字 -->
<bxs-input
  label="数字"
  type="number"
  placeholder="请输入数字("
  v-model="username"
/>
<!-- 密码 -->
<bxs-input
  label="密码"
  type="password"
  placeholder="请输入密码"
  v-model="username"
/>
<!-- 电话 -->
<bxs-input
  label="电话"
  type="tel"
  placeholder="请输入电话"
  v-model="username"
/>
```
#### 禁用输入框
```html
<bxs-input
    label="用户名"
    type="text"
    placeholder="禁用"
    disabled
    readonly
  />
```
#### 错误提示
```html
<bxs-input
  label="用户名"
  type="text"
  placeholder="请输入内容"
  v-model="errorMsgValue"
  error-message="错误原因提示"
/>
```
#### 尾部icon和按钮
```html
<!-- 带右箭头 -->
<bxs-input
  label="带箭头"
  type="text"
  placeholder="请输入内容"
  is-link
  v-model="iconValue"
/>
<!-- 自定义icon，可设置颜色、大小 -->
<bxs-input
  label="自定义"
  type="text"
  placeholder="请输入内容"
  v-model="iconValue"
  right-icon="search"
  icon-color="red"
  icon-size="21px"
  @click-icon="clickIcon"
/>
<!-- 自定义尾部按钮 -->
<bxs-input
  label="验证码"
  type="text"
  placeholder="请输入验证码"
  v-model="buttonValue"
  >
  <button class="bx-demo-button" slot="button">获取验证码</button>
</bxs-input>
```
#### 对齐方式
```html
<bxs-input
  label="左对齐"
  type="text"
  placeholder="请输入内容"
  v-model="alignValue"
/>
<bxs-input
  label="居中对齐"
  input-align="center"
  type="text"
  placeholder="请输入内容"
  v-model="alignValue"
/>
<bxs-input
  label="右对齐"
  input-align="right"
  type="text"
  placeholder="请输入内容"
  v-model="alignValue"
/>
```
#### 文本域
可以通过`type=textarea`属性设置
```html
<bxs-input
    label="详细地址"
    clearable
    type="textarea"
    placeholder="请填写详细地址，不少于5个字"
    v-model="detailAddress1"
  />
```
#### 自适应文本高度的文本域
```html
<bxs-input
    label="详细地址"
    autosize
    type="textarea"
    placeholder="请填写详细地址，不少于5个字"
    v-model="detailAddress2"
  />
<bxs-input
    :autosize="{minHeight: 44, maxHeight: 88}"
    type="textarea"
    placeholder="请填写详细地址，不少于5个字"
    v-model="detailAddress3"
  />
```

#### 文本域展示剩余字数
```html
<bxs-input
  :autosize="{minHeight: 44, maxHeight: 88}"
  :clearable="!1"
  maxlength="200"
  show-word-limit
  type="textarea"
  placeholder="请填写详细地址，不少于5个字"
  v-model="detailAddress4"
/>
```

#### 事件集合
```html
<bxs-input
  label="标题"
  type="text"
  placeholder="请输入内容"
  v-model="username"
  @input="eventHandler('input')"
  @focus="eventHandler('focus')"
  @blur="eventHandler('blur')"
  @click="eventHandler('click')"
  @clear="eventHandler('clear')"
/>
```

```js
import { Input } from 'bxs-ui-vue';
export default {
  data() {
    return {
      username: '',
      emailValue: '',
      errorValue: '',
      errorMsgValue: '',
      iconValue: '',
      alignValue: '',
      detailAddress1: '',
      detailAddress2: '',
      detailAddress3: '',
      buttonValue: '',
    }
  },
  methods: {
    clear() {
      this.$toast('清除成功')
    },
    clickIcon() {
      this.$toast('你点击了我')
    },
    select(data) {
      console.log(data);
    },
    eventHandler(name) {
      console.log(name)
    }
  },
  components: {
    [Input.name]: Input
  }
}
```

### Input Attributes
默认支持 `input`和`textarea` 标签所有的原生属性和原生事件，比如属性支持 `maxlength`、`placeholder`、`autofocus`、`type`、`disabled`、`readonly`等，事件支持`focus`、`blur`、`click`、`input`、`change`等
| 参数| 说明 | 类型 | 可选值 | 默认值 |
| --- | --- | --- |  --- | --- |
| label | 可选，输入框左侧文本 | String | ` ` | ` ` |
| value | 可选，当前输入的值 | String Number | ` ` | ` ` |
| clearable | 可选，是否清除内容 | Boolean | `true` `false` | `true` |
| error | 可选，是否输入内容显示红色（3.0.10后移除） | Boolean | `true` `false` | `false` |
| error-message | 底部错误提示文案，为空时不展示 | String | ` ` | ` ` |
| right-icon | 可选，最右边的icon | String | ` ` | ` ` |
| icon-color | 可选，最右边的icon颜色 | String | ` ` | `#CCC` |
| icon-size | 可选，最右边的icon大小 | String | ` ` | `18px` |
| input-align | 可选，输入框内容对齐方式 | String | `center` ` right` | ` ` |
| autosize | 自适应内容高度，只对`type="textarea"`有效，可传入对象 | Boolean Object | `true` `false` `{minHeight: 44, maxHeight: 88}` | `false` |
| is-link | 可选，是否显示右侧右箭头 | Boolean | `true` `false` | `false` |
| show-word-limit | 可选，是否显示剩余字数统计 | Boolean | `true` `false` | `false` |
| word-limit-threshold | 可选，开始进行剩余字数统计阈值 | Number String | ` ` | `50` |

### Input Slot
| 参数 | 说明 |
| --- | --- |
| button | 自定义尾部按钮 |
| extra | 用于Input扩展或高阶组件，如MailInput的邮箱联想 |

### Input Event
| 事件名称 | 说明 | 回调参数 |
| --- | --- | --- |
| blur | 失去焦点时触发 | Event |
| focus | 获得焦点时触发 | Event |
| input | 输入时触发 | Event |
| change | 值改变时触发 | Event |
| clear | 可选，点击清除按钮后触发 | ` ` |
| click-icon | 可选，点击尾部图标时触发 | ` ` |
