输入框

预览

使用方法

<template>
    <i-input></i-input>
    <i-input disabled></i-input>
    <i-input readonly></i-input>
    <i-input error="错误信息"></i-input>
    <br>
    <i-input v-model="xxx"></i-input>
    <br>
    <span>value:&nbsp;{{xxx}}</span>
</template>

选项

Input 组件的选项有： disabled, readonly, error。 并且支持数据的双向绑定。

1. disabled

表示是否禁用状态，默认为 false，禁用。

2. readonly

表示只读状态， 与 disabled 相似。但是 disabled 不可以被 Tab 键选中，readonly 可以被选中，不能修改。

3. error

给 Input 添加 error 属性，会在该 input 右侧显示一个提示图标与文字，用于提示。

4. v-model

预览
代码

<template>
  <div>
    <i-input v-model="value"></i-input> <br>
    value:{{value}}
  </div>
</template>
<script>
  export default {
    data(){
      return{ value:'双向绑定' }
    }
  }
</script>