## 输入框

### 基础用法
```html
<template>
  <div class="main-content">
     <div class="flex-line">
        <label>单行文本</label>
        <cl-input v-model="inputVal1" placeholder="输入文本" filterthousand-bit filtercurrency :validate="{required: true}"/>
      </div>
      <div class="flex-line">
        <label>单行文本密码</label>
        <cl-input v-model="inputVal2" placeholder="输入密码" show-password/>
      </div>
      <h4>带icon输入框，有两种实现方式</h4>
      <div class="flex-line">
        <label>属性实现</label>
        <cl-input v-model="inputVal3" prefix-icon="el-icon-user-solid" style="margin-right:20px;"/>
        <cl-input v-model="inputVal3" suffix-icon="el-icon-search"/>
      </div>
      <div class="flex-line">
        <label>slot实现</label>
        <cl-input v-model="inputVal3" style="margin-right:20px;">
          <i slot="prefix" class="el-input__icon">
            <cl-icon name="user" />
          </i>
        </cl-input>
        <cl-input v-model="inputVal3">
          <i slot="suffix" class="el-input__icon">
            <cl-icon name="search" />
          </i>
        </cl-input>
      </div>
      <h4>slot还可实现复合型输入框</h4>
      <div class="flex-line">
        <label>prepend前缀</label>
        <cl-input v-model="inputVal3">
          <template slot="prepend">Http://</template>
        </cl-input>
      </div>
      <div class="flex-line">
        <label>append后缀</label>
        <cl-input v-model="inputVal3">
          <template slot="append">.com</template>
        </cl-input>
      </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        inputVal1: "",
        inputVal2: "",
        inputVal3: ""
      }
    }
  }
</script>
<style>
  .main-content{
    width: 100%;
  }
  .main-content .flex-line:last-child{
    margin-bottom:0;
  }
  .flex-line{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .flex-line > label{
    width: 100px;
    text-align: right;
    margin-right: 20px;
  }

</style>
<!-- input-1.vue -->
```

### number计数器
```html
<template>
  <div class="main-content">
      <div class="flex-line">
        <label>默认样式</label>
        <cl-input v-model="inputVal1" type="number" :format="(val) => val * 100">          
        </cl-input>
      </div>
      <div class="flex-line">
        <label>控制按钮位置</label>
        <cl-input v-model="inputVal2" type="number" controls-position="left"/>
      </div>
      <div class="flex-line">
        <label>step步数</label>
        <cl-input v-model="inputVal3" type="number" :step="5"/>
      </div>
      <div class="flex-line">
        <label>严格步数</label>
        <cl-input v-model="inputVal4" type="number" :step="5" step-strictly/>
      </div>
      <div class="flex-line">
        <label>精度</label>
        <cl-input v-model="inputVal5" type="number" :precision="2"/>
      </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        inputVal1: 0,
        inputVal2: 0,
        inputVal3: 0,
        inputVal4: 0,
        inputVal5: 0,
      }
    }
  }
</script>
<style>
  .main-content{
    width: 100%;
  }
  .main-content .flex-line:last-child{
    margin-bottom:0;
  }
  .flex-line{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .flex-line > label{
    width: 100px;
    text-align: right;
    margin-right: 20px;
  }

</style>
<!-- input-number1.vue -->
```
### 多行文本
用于输入多行文本信息，通过将 type 属性的值指定为 textarea。

```html
<template>
  <div class="main-content">
      <div class="flex-line">
        <label>默认样式</label>
        <cl-input v-model="inputVal1" type="textarea"/>
      </div>
      <div class="flex-line">
        <label>高度自适应</label>
        <cl-input v-model="inputVal2" type="textarea" autosize/>
      </div>
      <div class="flex-line">
        <label>高度自适应并指定最大最小行数</label>
        <cl-input v-model="inputVal3" type="textarea"  :autosize="{ minRows: 2, maxRows: 4}"/>
      </div>
      <div class="flex-line">
        <label>固定行数</label>
        <cl-input v-model="inputVal4" type="textarea" :rows="1"/>
      </div>
      <div class="flex-line">
        <label>固定列数</label>
        <cl-input v-model="inputVal5" type="textarea" :cols="4"/>
      </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        inputVal1: "",
        inputVal2: "",
        inputVal3: "",
        inputVal4: "",
        inputVal5: "",
      }
    }
  }
</script>
<style>
  .main-content{
    width: 100%;
  }
  .main-content .flex-line:last-child{
    margin-bottom:0;
  }
  .flex-line{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .flex-line > label{
    width: 100px;
    text-align: right;
    margin-right: 20px;
  }

</style>
<!-- textarea1.vue -->
```
### 校验
添加`validate`属性可传入校验规则，接收`string`和`object`两种格式，了解更多查看组件库中校验模块。
```html
<template>
  <div class="main-content">
     <div class="flex-line">
        <label>邮箱校验</label>
        <cl-input v-model="inputVal1" validate="email"/>
      </div>
      <div class="flex-line">
        <label>必填校验</label>
        <cl-input v-model="inputVal2" :validate="{required: true}"/>
      </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        inputVal1: "",
        inputVal2: "",
      }
    }
  }
</script>
<style>
  .main-content{
    width: 100%;
  }
  .main-content .flex-line:last-child{
    margin-bottom:0;
  }
  .flex-line{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .flex-line > label{
    width: 100px;
    text-align: right;
    margin-right: 20px;
  }

</style>
<!-- input-2.vue -->
```
### 权限
添加`permission`属性可传入校验规则，共有四种状态，无权限、只读、编辑、必填。
```html
<template>
  <div class="main-content">
     <div class="flex-line">
        <label>权限控制</label>
        <el-radio-group v-model="permissionVal">
          <el-radio label="n">无权限</el-radio>
          <el-radio label="r">只读</el-radio>
          <el-radio label="w">编辑</el-radio>
          <el-radio label="b">必填</el-radio>
          </el-radio-group> 
      </div>
      <div class="flex-line">
        <label>输入框</label>
        <cl-input v-model="inputVal" :permission="permissionVal"/>
      </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        permissionVal: "w",
        inputVal: "",
      }
    }
  }
</script>
<style>
  .main-content{
    width: 100%;
  }
  .main-content .flex-line:last-child{
    margin-bottom:0;
  }
  .flex-line{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .flex-line > label{
    width: 100px;
    text-align: right;
    margin-right: 20px;
  }

</style>
<!-- input-3.vue -->
```
### 格式化显示

通过`format`属性可以设置输入框的显示格式，***仅在`type='text'`时生效***，该属性接收一个方法作为属性值，该方法返回格式化后显示的值。
1. 格式化不会修改实际的值；
2. 格式化的方法可以直接返回值或者通过`Promise`异步返回值；
3. 提供了`filterthousand-bit`：千分位，`filtercurrency`：人民币大写 两种快捷格式化属性，三种属性的优先级为：`format` > `filtercurrency` > `filterthousand-bit`；
4. 提供了`format-when-readonly`属性，默认为`true`，即只读时按照格式化显示，设置为`false`则只读时显示原始值。

```html
<template>
  <div class="main-content">
    <div class="flex-line">
      <label>权限控制</label>
      <el-radio-group v-model="permission">
        <el-radio label="n">无权限</el-radio>
        <el-radio label="r">只读</el-radio>
        <el-radio label="w">编辑</el-radio>
        <el-radio label="b">必填</el-radio>
        </el-radio-group> 
    </div>
    <div class="flex-line">
      <label>原始值</label>
      <cl-input v-model="inputVal" :permission="permission" />
    </div>
    <div class="flex-line">
      <label>金额（万）</label>
      <cl-input v-model="inputVal" :permission="permission" :format="(val) => val / 10000" />
    </div>
    <div class="flex-line">
      <label>金额（异步格式化）</label>
      <cl-input v-model="inputVal" :permission="permission" :format="handleFormat" />
    </div>
    <div class="flex-line">
      <label>千分位</label>
      <cl-input v-model="inputVal" :permission="permission" filterthousand-bit :format-when-readonly="false"/>
    </div>
    <div class="flex-line">
      <label>人民币大写</label>
      <cl-input v-model="inputVal" :permission="permission" filtercurrency />
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        permission: "r",
        inputVal: "1234",
      };
    },
    methods: {
      handleFormat(val){
        return new Promise((resolve) => {
          setTimeout(() => {
            resolve(val / 10000)
          }, 1500)
        })
      }
    }
  }
</script>
<style>
  .main-content {
    width: 100%;
  }
  .main-content .flex-line:last-child {
    margin-bottom: 0;
  }
  .flex-line {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .flex-line > label {
    width: 100px;
    text-align: right;
    margin-right: 20px;
  }
</style>

<!-- input-4.vue -->
```

### 日期计算
在`cl-input`中可以实时计算两个日期之间的时间间隔，时间间隔的单位可以指定年、月、日、时、分、秒。

<span style="color:red;font-weight:bold">特别注意，因为日期计算需要对整个表单进行监听计算，所以只在表单内生效，且表单控件上必须添加`v-form`指令。</span>

```html
<template>
  <el-form v-form>
    <div class="main-content">
        <div class="flex-line">
          <label>开始时间</label>
          <cl-date v-model="start" show-date format="yyyy年MM月dd日" />
        </div>
        <div class="flex-line">
          <label>结束时间</label>
          <cl-date v-model="end" show-date :day="2" />
        </div>
        <div class="flex-line">
          <label>间隔</label>
          <cl-input 
            v-model="duration" 
            :date-calc-exp="{
                    start: 'start',
                    end: 'end',
                    diffType: 'hour',
                  }" />
        </div>
    </div>
  </el-form>
</template>
<script>
  export default {
    data () {
      return {
        start: "",
        end: "",
        duration: "",
      }
    },
  }
</script>
<style>
  .main-content{
    width: 100%;
  }
  .main-content .flex-line:last-child{
    margin-bottom:0;
  }
  .flex-line{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .flex-line > label{
    width: 100px;
    text-align: right;
    margin-right: 20px;
  }

</style>
<!-- input-5.vue -->
```

### 实时单行/多行
```html
<template>
  <el-form v-form>
    <cl-form-item label="单行文本">
      <cl-input v-model="inputVal1" :validate="{ required: true }" />
    </cl-form-item>
    <cl-form-item label="实时单行">
      <cl-readonly-input
        script="Zm9ybVZtLiR3YXRjaChmdW5jdGlvbiAoKSB7CiAgICAgICAgICBfdGhpcy5pbnB1dFZhbHVlID0gdGhpcy5pbnB1dFZhbDEgLyAxMDAwMCArICLkuIflhYMiOwogICAgICAgIH0pOwogICAgICAgIHJldHVybiAiMC4wMCI7"
      />
    </cl-form-item>
  </el-form>
</template>
<script>
  export default {
    data() {
      return {
        inputVal1: "",
      };
    },
  };
</script>

<!-- input-6.vue -->
```

### 属性说明
| 属性 | 类型 | 默认值 | 说明 |
| :--- | :--- | :--- | :--- |
| type | string| - | 输入框类型，可选值为`text`，`textarea`,`number` 和其他 原生 input 的 type 值，默认为`text` |
| v-model | string/number | - | 绑定值 |
| maxlength | number| - | 原生属性，最大输入长度 |
| minlength | number| - | 原生属性，最小输入长度 |
| show-word-limit | boolean| false | 是否显示输入字数统计，只在 type = "text" 或 type = "textarea" 时有效 |
| placeholder | string | 请输入内容 | 输入框占位文本 |
| show-password | boolean | false | 是否显示切换密码图标,type为`text`时生效 |
| disabled | boolean | false | 禁用 |
| readonly | boolean | false | 是否只读 |
| size | string | small | 输入框尺寸，只在 type!="textarea" 时有效,可选值为medium / small / mini |
| prefix-icon | string | - | 输入框头部图标 |
| suffix-icon | string | - | 输入框尾部图标 |
| rows | number | 2 | 输入框行数，只对 type="textarea" 有效 |
| cols | number | 60 | 输入框列数，只对 type="textarea" 有效 |
| autosize | boolean / object | false | 自适应内容高度，只对 type="textarea" 有效，可传入对象，如，{ minRows: 2, maxRows: 6 } |
| max | number | - | 原生属性，设置最大值 |
| min | number | - | 原生属性，设置最小值 |
| step | number | 1 | 原生属性，设置输入字段的合法数字间隔 |
| tabindex | string | - | 输入框的tabindex |
| validate | string / object | - | 校验规则 |
| permission | string | w | 这个单行文本实现了控件的无权限(n)、只读(r)、编辑(w)、必填(b)权限，而且权限在变更后对输入框的影响会立即生效。 |
| format | Function | - | 【仅type='text'生效】格式化显示值，格式化的方法可以直接返回值或者通过`Promise`异步返回值 |
| filterthousand-bit | boolean | false | 【仅type='text'生效】千分位格式化显示 |
| filtercurrency | boolean | false | 【仅type='text'生效】人民币大写格式化显示 |
| format-when-readonly | boolean | true | 【仅type='text'生效】只读时是否格式化显示，默认为`true`，即只读时按照格式化显示，设置为`false`时只读时显示原始值。|
| width | string / number | - | 输入框宽度 |
| clearable | boolean | true | 是否可清空 |
| math-exp | string | - | 数学计算表达式，详情查看计算公式组件 |
| date-calc-exp | object | - | 日期计算表达式，例如：`:date-calc-exp="{start: 'start', end: 'end', diffType: 'hour'}"`表示计算`end-start`的时间间隔，计算的单位通过`diffType`指定，默认为`hour`,可选值有`'year', 'month', 'day', 'hour', 'minute', 'second'`。 |
| model-name | string | - | v-model绑定的表达式 |


### type=number 计数器时特有属性
| 属性 | 类型 | 默认值 | 说明 |
| :--- | :--- | :--- | :--- |
| step-strictly | boolean | false | 是否只能输入 step 的倍数 |
| precision | number | - | 数值精度 |
| controls-position | string| right | 控制按钮位置 |


### 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 属性生成的清空按钮时触发 | - |
