输入框

预览

使用方法

<template>
    <zh-input></zh-input>
    <zh-input disabled value="禁用"></zh-input>
    <zh-input readonly value="只读"></zh-input>
    <zh-input error="错误信息"></zh-input>
    <zh-input :success="true"></zh-input>
    <zh-input tips="提示信息"></zh-input>
    <br />
    <zh-input v-model="xxx"></zh-input>
    <br />
    <span>value:&nbsp;{{xxx}}</span>
</template>

选项

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

1. disabled

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

2. readonly

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

3. error / success / tips

给 Input 添加 error / success / tips 属性，会在该 input 右侧显示用于提示用户的图标或文字。

4. v-model

预览
代码

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