# 输入框

# 简单示例

您可以像使用 html 自带的 input 组件一样,轻松使用我们提供的 input 组件。

<hai-input></hai-input>

# value

可选

  • 类型:String

  • 默认值:undefined

  • 用法示例:

<hai-input value="请输入内容"></hai-input>

value 属性中可以传入默认显示的值。

# disabled

可选

  • 类型:Boolean

  • 默认值:false

  • 可接受值:true false

  • 用法示例:

<hai-input value="不可用" disabled></hai-input>

将输入框设置为 disabled

# readonly

可选

  • 类型:Boolean

  • 默认值:false

  • 可接受值:true false

  • 用法示例:

<hai-input value="只读" readonly></hai-input>

将输入框设置为 readonly

# error

可选

  • 类型:String

  • 默认值:undefined

  • 用法示例:

<hai-input error="您输入的信息不符合要求!"></hai-input>

可以给传入 error 传入错误信息,并且将输入框变为 error 样式。

# v-model

输入框组件支持 v-model 双向绑定。

  • 用法示例:
<hai-input v-model="message"></hai-input>
<hai-button @click="message+='点我 '">点我</hai-button>

message: {{message}}