# Input 输入框
---
### 基础用法

<div class="demo-block">
    <y-input type="text" v-model="name" @enter="enterdom" style="width:200px" placeholder="请输入" />
</div>
<script>
export default{
  data(){
    return {
      name:'',
      plate: '粤',
      plate2: '粤',
      plateList: ['京', '津', '沪', '渝', '冀', '豫', '云', '辽', '黑', '湘', '皖', '鲁', '新', '苏', '浙', '赣', '鄂', '桂', '甘', '晋', '蒙', '陕', '吉', '闽', '贵', '粤', '青', '藏', '川', '宁', '琼', '使', '领']
    }
  },
  methods:{
    enterdom(){
      alert(1);
    }
  }
}
</script>

<style lang="less">
  .demo-block {
    .k-form-item-error-tip{
       position: inherit;
       font-size: 12px;
    }
    .plate-select{
       .k-select-arrow{
          right: -2px;
       }
    }
    .icon-plate{
      /* background: #eee;
      font-size: 12px; */
      &:before{
        content: '挂';
      }
    }
  }
</style>

::: demo

```html
<template>
    <y-input type="text" v-model="name" style="width:200px" style="width:200px" placeholder="请输入" />
</template>
```
:::


### 禁止状态
<!-- 通过添加```disabled```输入框禁止输入 -->

<div class="demo-block">
    <y-input type="text" style="width:200px" disabled placeholder="禁止输入" />
</div>

::: demo

```html
<template>
    <y-input type="text" style="width:200px" disabled value="禁止输入" />
</template>
```
:::

### 错误状态

<div class="demo-block">
    <div class="k-form">
      <div class="k-form-item-error">
        <y-input type="text" style="width:200px" value="这是一条错误信息" />
      </div>
      <div class="k-form-item-error-tip">输入内容有误，请重新输入</div>
    </div>
</div>

::: demo

```html
请结合form表单使用，此处只做展示用
<template>
    <y-input type="text" style="width:200px" placeholder="这是一条错误信息" />
</template>
```
:::

### 带图标
<!-- 通过添加```clearable```可以清空输入框的内容 -->

<div class="demo-block">
    <y-input type="text" clearable style="width:200px" value="输入内容后点击删除" />
</div>

::: demo

```html
<template>
    <y-input type="text" clearable style="width:200px" value="输入内容后点击删除" />
</template>
```
:::

<!-- ### 图标用法
通过添加```icon```，```iconAlign```设置icon以及icon的位置

<div class="demo-block">
    图标输入框：<y-input type="text"  icon="icon-close" iconAlign="left" style="width:200px" placeholder="请输入内容..." />
</div> -->

<!-- ### 尺寸用法
通过添加```mini```设置成高度为25px的输入框

<div class="demo-block">
    图标输入框：<y-input type="text" mini clearable style="width:200px" placeholder="请输入内容..." />
</div> -->


### 长文本
<!-- 通过```type```，```rows```设置文本域类型，以及可以有多少行内容 -->
<div class="demo-block">
    <y-input type="textarea" :rows="3" style="width: 300px;" :countLimit="100" placeholder="" />
</div>

::: demo

```html
<template>
    <y-input type="textarea" :rows="3" style="width: 300px;" :countLimit="100" placeholder="" />
</template>
```
:::

### 车牌输入框

#### 基础用法
<div class="demo-block">
    <y-select :width="50" v-model="plate2" class="plate-select">
      <y-option v-for="(x,y) in plateList" :key="y" :value="x" :label="x">
      </y-option>
    </y-select>
    <y-input type="text" style="width: 148px;" placeholder="请输入" />
</div>

::: demo

```html
<template>
    <y-select :width="50" v-model="plate2" class="plate-select">
      <y-option v-for="(x,y) in plateList" :key="y" :value="x" :label="x">
      </y-option>
    </y-select>
    <y-input type="text" style="width: 148px;" placeholder="请输入" />
</template>
```
:::

#### 带标签
<div class="demo-block">
    <y-select :width="50" v-model="plate" class="plate-select">
      <y-option v-for="(x,y) in plateList" :key="y" :value="x" :label="x">
      </y-option>
    </y-select>
    <y-input type="text" style="width: 148px;" placeholder="请输入"
      icon="icon-plate"
      :iconTag="true"
      iconAlign="right">
    </y-input>
</div>

::: demo

```html
<template>
    <y-select :width="50" v-model="plate" class="plate-select">
      <y-option v-for="(x,y) in plateList" :key="y" :value="x" :label="x">
      </y-option>
    </y-select>
    <y-input type="text" style="width: 148px;" placeholder="请输入" />
</template>
```
:::

### y-input 属性说明
| 属性      | 说明     | 类型      | 可选值        | 默认值   |
|---------- |--------  |---------- |-------------  |-------- |
| type | 类型  | String | text、password、textarea、url、email、date |  text  |
| placeholder  | 占位符 | String   |    --   | --  |
| disabled  | 是否禁用 | Boolean   |    true/false    | false   |
| clearable  | 是否可清空 | Boolean   |    true/false    | false   |
| icon      | 图标，已有的图标库中的图标名 | String   |  -- |  --  |
| icon-align | 图标位置，仅仅在type="text"下有效 | String|left,right|  right  |
| iconTag  | 是否是标签icon | Boolean   |  -- |  --  |
| mini     | 尺寸，改变input高度 | Boolean  |  --  |  false  |
| readonly     | 只读属性 | Boolean  |  --  |  false  |
| maxlength     | 最大输入现在 | String  |  --  |  --  |
| rows     | 行数，仅仅在type="textarea"下有效 | String,Number  |  --  |  --  |
| autocomplete | 原生的自动完成功能 | Boolean, String, Number | off, on  |  --  |
| spellcheck | 原生的 spellcheck 属性 | Boolean| --|  false |


 ### y-input 方法说明
| 属性      | 说明     | 类型      | 默认值   |
|---------- |--------  |---------- |-------- |
| enter | 按下回车键时触发  |Function | --|
| focus | 输入框聚焦时触发  | Function | --|
| blur | 输入框失去焦点时触发  | Function | --|
| keyup | 原生的 keyup 事件  | Function | --|
| keydown | 原生的 keydown 事件  | Function | --|
| keypress | 原生的 keypress 事件  | Function | --|