虚拟下拉框 virtual-select 待优化

用于可选数据量极大的情况

使用说明

简单引入

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

WARNING

目前datas只允许传入选择值value数组，后续版本计划允许传入配置对象数组，支持通过配置控制option中的属性

请注意，与虚拟滚动框相同的是，你必须需要通过css变量给定选项和选项框一个固定的px高度，选项内容自动垂直居中

0

展开代码

<template>
  <vi-virtual-select v-model="val" :datas="datas" style="--vi-select-list-height: 200px;--vi-option-height: 30px;" placeholder="请选择" />
</template>

<script setup>
  import { ref,reactive } from 'vue'
  const datas = reactive([])

  for (let i = 0; i < 150; i++) {
    datas.push(i)
  }

  const val = ref()
</script>

除选项传入方法区别外，虚拟下拉框与普通下拉框功能基本一致，请对照下方表格进行使用

Props

select

属性名	描述	类型	默认值

插槽

无插槽

事件支持

无特殊事件

可覆写css变量

select

变量名	描述	默认值

option

变量名	描述	默认值