Viog UI

输入框 input 待优化

用于数据输入

使用说明

简单引入

你需要通过v-model向该组件绑定一个Ref变量用于接收和改变输入内容

展开代码
<vi-input v-model="val" placeholder="请输入内容"/>

样式

通过type属性定义不同的输入框样式

展开代码
<vi-input v-model="val" type="plain"/>
<vi-input v-model="val" type="button"/>

typew为button/plain的输入框通过round属性改变边框弧度

展开代码
<vi-input v-model="val" type="plain" round/>
<vi-input v-model="val" type="button" round/>

颜色

可以通过color属性修改type为default或plain的input框hover状态下颜色

展开代码
<vi-input v-model="val" color="purple"/>
<vi-input v-model="val" color="red"/>
<vi-input v-model="val" color="pink"/>
<vi-input v-model="val" color="yellow"/>
<vi-input v-model="val" color="green"/>
<vi-input v-model="val" color="blue"/>
<vi-input v-model="val" color="golden"/>
<vi-divider/>
<vi-input v-model="val" type="plain" color="purple"/>
<vi-input v-model="val" type="plain" color="red"/>
<vi-input v-model="val" type="plain" color="pink"/>
<vi-input v-model="val" type="plain" color="yellow"/>
<vi-input v-model="val" type="plain" color="green"/>
<vi-input v-model="val" type="plain" color="blue"/>
<vi-input v-model="val" type="plain" color="golden"/>

尺寸

通过size类型定义组件尺寸

small 大小placeholder有些bug，正在处理

展开代码
<vi-input v-model="val" size="big" place="请输入内容"/>
<vi-input v-model="val" place="请输入内容"/>
<vi-input v-model="val" size="small" place="请输入内容"/>
<vi-divider/>
<vi-input v-model="val" type="plain" size="big" place="请输入内容"/>
<vi-input v-model="val" type="plain" place="请输入内容"/>
<vi-input v-model="val" type="plain" size="small" place="请输入内容"/>
<vi-divider/>
<vi-input v-model="val" type="button" size="big" place="请输入内容"/>
<vi-input v-model="val" type="button" place="请输入内容"/>
<vi-input v-model="val" type="button" size="small" place="请输入内容"/>

禁用

通过disabled属性禁用组件

展开代码
<vi-input v-model="val" disabled/>
<vi-input v-model="val" type="plain" disabled/>
<vi-input v-model="val" type="button" disabled/>

清空内容

通过showClear属性添加清除内容按钮

展开代码
<vi-input v-model="val" show-clear/>

密码框

通过password属性控制input框是否为密码框

展开代码
<vi-input v-model="val" password show-clear/>

通过showPassword属性添加显示密码按钮

展开代码
<vi-input v-model="val" password show-password type="button" placeholder="请输入密码"/>
<vi-input v-model="val" password show-clear show-password placeholder="请输入密码"/>

数字框

number属性控制input框只允许输入数字

展开代码
<vi-input v-model="nums" number :maxlength="12" placeholder="输入一串数字"/>

前后缀

通过插槽prefix与suffix可以定义input前后缀

你可以插入文字、icon、或者是select组件，但注意，前后缀内容需自行拼接，组件并不支持自动组装

请选择
@qq.com
展开代码
<template>
<vi-input v-model="val" style="--vi-input-prefix-width: 4em;">
  <template v-slot:prefix>
      <vi-select v-model="choose" chooseType="plain" class="my-input-select">
        <vi-option-group title="常用地区">
          <vi-option value="+86" selected desc="中国大陆">
            <template v-slot:pre>
              中国大陆
            </template>
            +86
          </vi-option>
          <vi-option value="+163">
            <template v-slot:pre>
              中国台湾
            </template>
            +886
          </vi-option>
        </vi-option-group>
        <vi-option-group title="Z">
          <vi-option value="+86" selected desc="中国大陆">
            <template v-slot:pre>
              中国大陆
            </template>
            +86
          </vi-option>
          <vi-option value="+163">
            <template v-slot:pre>
              中国台湾
            </template>
            +886
          </vi-option>
        </vi-option-group>
      </vi-select>
  </template>
</vi-input>
<vi-divider/>
<vi-input v-model="val" type="plain" placeholder="在线搜索">
  <template v-slot:suffix>
    @qq.com
  </template>
</vi-input>
<vi-divider/>
<vi-input v-model="val" type="button" round>
  <template v-slot:prefix>
    <vi-icon type="sousuo"/>
  </template>
</vi-input>
</template>

<style>
.my-input-select {
  --vi-input-width: 4em;
  --vi-select-list-gap: 1em;
  --vi-select-list-width: 180px;
  --vi-select-list-height: 140px;
}
</style>

若在input前后缀中使用select组件，样式会自动改变

远程搜索 实验中

通过search属性可以开启远程搜索控制功能，该功能正在测试中，后续版本正式上线

Props

属性名描述类型默认值

插槽

插槽名描述有无默认内容

事件支持

事件名描述参数列表

可覆写css变量

变量名描述默认值