Input输入框

基础用法

<vt-input 
  v-model="username" 
  placeholder="请输入" 
  style="width: 280px"
>
</vt-input>

禁用状态

通过disabled属性指定是否禁用 input 组件

<vt-input 
  v-model="username" 
  placeholder="请输入"
  :disabled="true"
  style="width: 280px"
>
</vt-input>

可读性

使用 readonly 属性指定是否可读

<vt-input 
  v-model="username" 
  placeholder="请输入"
  :readonly="true"
  style="width: 280px"
>
</vt-input>

一键清空

使用clearable属性即可得到一个可一键清空的输入框

<vt-input 
  v-model="username" 
  placeholder="请输入"
  :clearable="true"
  style="width: 280px"
>
</vt-input>

密码框

使用 show-password 属性即可得到一个可切换显示隐藏的密码框

<vt-input 
  v-model="username" 
  placeholder="请输入"
  :show-password="true"
  style="width: 280px"
>
</vt-input>

带图标的输入框

使用 prefix-icon 或 suffix-icon 即可得到一个带前缀图标或后缀图标的输入框

<vt-input 
  v-model="username" 
  style="width: 280px"
>
  <template #prefixIcon>
    <vt-icon>
      <add-circle></add-circle>
    </vt-icon>
  </template>
  <template #sufixIcon>
    <vt-icon>
      <add-circle></add-circle>
    </vt-icon>
  </template>
</vt-input>

复合型输入框

可以在输入框中前置或后置一个元素，通常是标签或按钮。 可通过 slot 来指定在 Input 中分发的前置或者后置的内容。

哈哈

哈哈

<vt-input 
  v-model="username" 
  @blur="handleBlur" 
  @focus="handleFocus" 
  placeholder="请输入" 
  :show-password="true"
  :clearable="true"
  style="width: 280px"
>
  <template #prepend>哈哈</template>
  <template #append>哈哈</template>
</vt-input>

API

属性

名称	类型	默认值	说明
type	string	text	类型
model-value / v-model	string/number	-	绑定值
placeholder	string	请输入	输入提示占位文本
clearable	boolean	false	是否显示清除按钮
show-password	boolean	false	是否显示切换密码图标
disabled	boolean	false	是否禁用
readonly	boolean	false	是否只读

事件

事件	类型	说明
input	Function	在 Input 框输入时触发
blur	Function	在 Input 当选择器的输入框失去焦点时触发
focus	Function	在 Input 当选择器的输入框失去焦点时触发
change	Function	在 Input 框输入改变时触发
clear	Function	在 Input 框清空时触发

插槽

名称	说明
prefix	输入框头部内容
suffix	输入框尾部内容
prepend	输入框前置内容
append	输入框后置内容