# lhd-virtual-select > 虚拟下拉滚动组件 Latest version **1.0.1** (published 2022-06-22) · MIT license · 0 weekly downloads ## Install ```sh npm install lhd-virtual-select pnpm add lhd-virtual-select yarn add lhd-virtual-select bun add lhd-virtual-select ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.1 | | Published | 2022-06-22 | | First published | 2022-06-22 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 99 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | lhd | | Maintainers | linhongdong | | Keywords | vue, JavaScript, component, select, virtual select | ## Links - npm: https://www.npmjs.com/package/lhd-virtual-select - npm.io page: https://npm.io/package/lhd-virtual-select ## Recent versions - 1.0.1 (latest) — 2022-06-22 - 1.0.0 — 2022-06-22 ## README ### 使用方法 - 1、安装组件 ``` npm i lhd-virtual-select ``` - 2、引入组件，并挂载 ``` import VirtualSelect from 'lhd-virtual-select'; import 'lhd-virtual-select/dist/css/index.css'; Vue.use(VirtualSelect); ``` #### 源码地址 [源码地址(github)](https://github.com/linhongdong/study-notes.git/components/lhd-virtual-select/) ##### VirtualSelect 组件设计 虚拟下拉滚动组件 支持 10 万 + 数据不卡顿 virtual select [component] select input 框 [box] 用来显示选中项及搜索等 公开的可配置的 属性 name input 的 name 属性 class 样式 value/v-model 当前选中项 placeholder 占位符 disabled 是否禁用 filterable 支持搜索 clearable 是否可清空 方法 filterMethod 自定义搜索方法 change 选中值发生变化时触发 clear 可清空的单选模式下用户点击清空按钮时触发 blur 当 input 失去焦点时触发 (event: Event) focus 当 input 获得焦点时触发 (event: Event) 私有的内部的 属性 visible 是否显示下拉框 方法 handleFocus 聚焦事件 handleBlur 失去焦点 下拉列表容器 [box] 虚拟滚动容器 [container] 公开的可配置的 属性 class 样式 noDataText 无数据文案 支持 slot="empty" dataList 列表数据 visibleNumber 可见条数 // height 容器高度 = 可见条数 * item 高度 私有的内部的 属性 startIndex 可见区域起始索引 selectedLabel 选中项的 label queryLabel 搜索的 label filterDataList 筛选后的数据列表 计算属性 endIndex 可见区域结束索引 endIndex = startIndex + visibleNumber allNum 总条数 halfItemNumber 一半选项的数量 currentIndex 当前选中项的索引 transformOffset 可见区域容器的偏移 transform emptyText noDataText || 暂无数据 selectDisabled disabled 方法 initFilterDataList 初始化 filterDataList setSelected 根据 value 值的变化设置选中项 getStartIndex 获取第一个需要渲染 item 的索引，即 startIndex setStartIndex 设置 startIndex setScrollTop 设置 scrollTop onScrollChange 监听滚动事件 handleDataList 按条件过滤数组 onInputChange 搜索输入 toggleMenu 点击选框聚焦到 input 框 selectItemClick 选择项点击事件 clear 清空 debouncedOnInputChange 防抖 实际高度的容器 [real height box] 起支支撑作用，和正常渲染所有 item 元素后的高度一样高 itemHeight * allNum 可见区域容器 [box] 实际渲染元素，用来存放真实的可视的 item 集合 数据项 [item] 公开的可配置的 属性 class 样式 itemHeight item 高度 itemKey item key 值 valueKey item value 值 labelKey item label 值 // disabled 是否禁用是否禁用该选项 方法 click 选项点击事件 item 支持自定义 slot="item" 私有的内部的 属性 key 唯一标识 value 选项值 label 选项显示值 方法 click 选项点击事件 --- _Source: https://npm.io/package/lhd-virtual-select · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._