Viog UI

下拉框 select 待优化

用于可选数据量较多的情况

使用说明

简单引入

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

请选择
展开代码
<vi-select v-model="val" placeholder="请选择" name="choose"></vi-select>

使用vi-option组件定义选项，传入value设置选项值，默认插槽可以设置选项别名

通过css变量--vi-select-width与--vi-select-height设置下拉框宽度与高度 通过css变量--vi-select-list-width与--vi-select-list-height设置下拉框列表宽度与高度

请选择
展开代码
<vi-select v-model="val" placeholder="请选择" name="choose" class="my-select-v2">
    <vi-option value="option 1">选项1</vi-option>
    <vi-option value="option 2">选项2</vi-option>
    <vi-option value="option 3">选项3</vi-option>
</vi-select>

> 注意：相同value的option在一个select中只能存在一个别名！！！不同select间别名不会共享

<style>
.my-select-v2 {
  --vi-select-width: 200px;
  --vi-select-list-width: 100%;
  --vi-select-list-max-height: 140px;
}
</style>

选项

option组件使用selected属性，默认选中某一选项

使用disabled属性禁用某个属性

请选择
展开代码
<vi-select v-model="val2" placeholder="请选择" name="choose2">
    <vi-option value="option 1" selected>选项1</vi-option>
    <vi-option value="option 2" disabled>选项2</vi-option>
    <vi-option value="option 3">选项3</vi-option>
</vi-select>

option组件通过suf与pre插槽可以为选项添加选项描述

请选择一种饮品
展开代码
<vi-select v-model="val3" placeholder="请选择一种饮品" name="choose3" class="my-select-v2" choose-type="plain">
    <vi-option value="芋泥波波奶茶">
      芋泥波波奶茶
      <template v-slot:suf>
       <span class="my-select-fix">好喝到爆炸</span>
      </template>
    </vi-option>
    <vi-option value="蜜桃四季春">
      <template v-slot:pre>
       <span class="my-select-fix">夏日必备</span>
      </template>
      蜜桃四季春
    </vi-option>
    <vi-option value="多肉葡萄">
      <template v-slot:pre>
       <span class="my-select-fix">我的最爱</span>
      </template>
      多肉葡萄
    </vi-option>
</vi-select>

选项组

使用vi-option-group组件定义选项组

属性title定义组名

请选择
展开代码
<vi-select v-model="val2" placeholder="请选择" name="choose2" class="my-select-v2" choose-type="plain">
    <vi-option-group title="组1">
      <vi-option value="option 1" selected>选项1</vi-option>
      <vi-option value="option 2">选项2</vi-option>
      <vi-option value="option 3">选项3</vi-option>
    </vi-option-group>
    <vi-option-group title="组2">
      <vi-option value="option 3" selected>选项3</vi-option>
      <vi-option value="option 4">选项4</vi-option>
      <vi-option value="option 5">选项5</vi-option>
    </vi-option-group>
</vi-select>

样式

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

请选择
请选择
展开代码
<vi-select v-model="val" placeholder="请选择" name="choose" class="my-select-v2">
    <vi-option value="option 1">选项1</vi-option>
    <vi-option value="option 2">选项2</vi-option>
    <vi-option value="option 3">选项3</vi-option>
</vi-select>
<vi-select v-model="val" placeholder="请选择" name="choose" class="my-select-v2" type="button">
    <vi-option value="option 1">选项1</vi-option>
    <vi-option value="option 2">选项2</vi-option>
    <vi-option value="option 3">选项3</vi-option>
</vi-select>

你也可以通过属性chooseType定义不同的选择样式

请选择
请选择
展开代码
<vi-select v-model="val" placeholder="请选择" name="choose" choose-type="plain" class="my-select-v2">
    <vi-option value="option 1">选项1</vi-option>
    <vi-option value="option 2">选项2</vi-option>
    <vi-option value="option 3">选项3</vi-option>
</vi-select>
<vi-select v-model="val" placeholder="请选择" name="choose" choose-type="plain" class="my-select-v2" type="button">
    <vi-option value="option 1">选项1</vi-option>
    <vi-option value="option 2">选项2</vi-option>
    <vi-option value="option 3">选项3</vi-option>
</vi-select>

尺寸

通过size类型定义组件尺寸

请选择
请选择
请选择
请选择
请选择
请选择
展开代码
<vi-select v-model="val" placeholder="请选择" size="big" name="choose"></vi-select>
<vi-select v-model="val" placeholder="请选择" size="middle" name="choose"></vi-select>
<vi-select v-model="val" placeholder="请选择" size="small" name="choose"></vi-select>
<vi-divider/>
<vi-select v-model="val" placeholder="请选择" size="big" type="button" name="choose"></vi-select>
<vi-select v-model="val" placeholder="请选择" size="middle" type="button" name="choose"></vi-select>
<vi-select v-model="val" placeholder="请选择" size="small" type="button" name="choose"></vi-select>

禁用

通过disabled属性禁用组件

请选择
请选择
展开代码
<vi-select v-model="val" placeholder="请选择" disabled name="choose"></vi-select>
<vi-select v-model="val" placeholder="请选择" disabled type="button" name="choose"></vi-select>

选中关闭

使用属性once，当选中后下拉框立即回收

请选择
展开代码
<vi-select v-model="val" placeholder="请选择" name="choose" choose-type="plain" class="my-select-v2" once>
    <vi-option value="option 1">选项1</vi-option>
    <vi-option value="option 2">选项2</vi-option>
    <vi-option value="option 3">选项3</vi-option>
</vi-select>

多选

通过multi属性开启多选模式

该模式下，v-model必须绑定为一个数组，其中记录所有的选中

请选择
展开代码
<vi-select v-model="arr" placeholder="请选择" name="choose" choose-type="plain" class="my-select-v2" multi style="--vi-select-height: auto;">
    <vi-option value="option 1">选项1</vi-option>
    <vi-option value="option 2">选项2</vi-option>
    <vi-option value="option 3">选项3</vi-option>
</vi-select>

远程搜索 实验中

通过search属性可以开启远程搜索控制功能，通过search事件，获取搜索关键字,v-model绑定的变量会接收用户最后选择的option

search事件将接受两个参数，第一个参数为用户搜索内容值，第二个参数为一个对象，通过该对象中finish ref变量控制搜索是否完成

当本次搜索完成后，将finish置为true即可

你可以通过loading插槽定制list在搜索未完成时的显示

WARNING

该功能尚在开发中，使用体验可能不佳

展开代码
<vi-select v-model="searchInfo" name="choose" class="my-select-v2" placeholder="请输入关键字" @search="handleSearch" search>
    <vi-option v-for="item in optionList" :key="item" :value="item">{{ item }}</vi-option>
    <template v-slot:loading>
      <div class="my-select-v2__loading">
        正在搜索
        <vi-loading type="circle" size="20"></vi-loading>
      </div>
    </template>
</vi-select>

<script setup>
  const searchInfo = ref()
  const optionList = reactive([])

  function handleSearch (key, { finish }) {
    console.log(key)
    setTimeout(() => {
      optionList[0] = key
      finish.value = true
    }, 500)
  }
</script>

<style>
.my-select-v2__loading {
  padding: 1em;
  text-align: center;
}
</style>

Props

select

属性名描述类型默认值

option

属性名描述类型默认值

option-group

属性名描述类型默认值

插槽

select

插槽名描述有无默认内容

option

插槽名描述有无默认内容

option-group

插槽名描述有无默认内容

事件支持

select

事件名描述参数列表

可覆写css变量

select

变量名描述默认值

option

变量名描述默认值