Custom Ant Design Vue Library

一个基于 Ant Design Vue 1.7.8 和 Vue 2.6.14 的自定义组件库，提供高性能的虚拟滚动选择组件。

特性

- 🎯 基于 Ant Design Vue 1.7.8
- 🚀 集成 vue-virtual-scroller 实现高性能虚拟滚动
- 🔍 内置搜索功能，支持实时过滤
- ⌨️ 支持键盘导航（上下箭头、回车键）
- 🎨 完全兼容 Ant Design Vue 的样式和交互
- 📦 支持 npm 包发布
- 🔧 TypeScript 支持
- 🧪 Jest 测试支持

安装

``bash
npm install @yeepay/custom-antdv-lib vue-virtual-scroller
`

使用

$3

`javascript
import Vue from 'vue';
import CustomAntdvLib from '@yeepay/custom-antdv-lib';
import 'ant-design-vue/dist/antd.css';
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';

Vue.use(CustomAntdvLib);
`

$3

`javascript
import { VirtualSelect } from '@yeepay/custom-antdv-lib';
import 'ant-design-vue/dist/antd.css';
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';

export default {
components: {
VirtualSelect
}
}
`

$3

`vue



`

组件

$3

基于 Ant Design Vue 的 Select 组件封装，集成虚拟滚动功能，适用于大量数据的场景。

#### Props

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| options | 选项数据数组 | Array | [] |
| value | 当前选中的值 | String/Number/Array | '' |
| disabled | 是否禁用 | Boolean | false |
| placeholder | 占位符文本 | String | '请选择' |
| labelKey | 选项标签字段名 | String | 'value' |
| valueKey | 选项值字段名 | String | 'key' |
| itemSize | 每个选项的高度（px） | Number | 36 |
| showSearch | 是否启用搜索功能 | Boolean | false |
| virtualScrollHeight | 虚拟滚动容器高度（px） | Number | 300 |

#### Events

| 事件名 | 说明 | 回调参数 |
| --- | --- | --- |
| input | 值变化时触发 | (value: String/Number/Array) |
| change | 选择变化时触发 | (value: String/Number/Array) |
| select | 选择选项时触发 | (item: Object) |
| search | 搜索时触发 | (value: String) |

#### Methods

| 方法名 | 说明 | 参数 |
| --- | --- | --- |
| focus | 获取焦点 | - |
| blur | 失去焦点 | - |

#### 透传属性

支持所有 Ant Design Vue Select 组件的属性，包括但不限于：

- size - 选择框大小（large/default/small）
- loading - 加载中状态
- allowClear - 是否支持清除
- dropdownMatchSelectWidth - 下拉菜单和选择器同宽
- getPopupContainer - 菜单渲染父节点
- 等等...

数据格式

组件支持灵活的数据格式，通过 labelKey 和 valueKey 属性来指定字段映射：

`javascript
// 默认格式
const options = [
{ key: '1', value: '选项 1' },
{ key: '2', value: '选项 2' }
];

// 自定义格式
const customOptions = [
{ id: 1, name: '张三' },
{ id: 2, name: '李四' }
];

// 使用自定义格式
:options="customOptions"
labelKey="name"
valueKey="id"
/>
`

虚拟滚动

组件集成了 vue-virtual-scroller，能够高效处理大量数据：

- 性能优化：只渲染可见区域的选项
- 内存友好：大量数据时不会影响页面性能
- 流畅滚动：支持平滑的滚动体验
- 键盘导航：支持上下箭头键导航

$3

`vue
:options="largeOptions"
:virtualScrollHeight="400"
:itemSize="36"
:showSearch="true"
/>
`

搜索功能

启用搜索功能后，用户可以实时过滤选项：

`vue
:options="options"
:showSearch="true"
@search="handleSearch"
/>
`

搜索功能特点：
- 实时过滤，无需额外配置
- 支持中文和英文搜索
- 不区分大小写
- 支持部分匹配

键盘导航

组件支持完整的键盘导航功能：

- ↑/↓ - 上下导航选项
- Enter - 选择当前高亮选项
- Esc - 关闭下拉菜单

开发

$3

`bash
npm install
`

$3

`bash
npm run dev
`

$3

`bash
npm run build
`

$3

启动 Vue CLI 开发服务器进行组件调试：

`bash
npm run serve
`

这将在 http://localhost:8080 启动开发服务器，您可以在浏览器中查看和调试组件。

$3

`bash
npm run test
`

$3

`bash
npm run lint
`

项目结构

`
custom-antdv-lib/
├── src/
│ ├── components/
│ │ └── CustomSelect.vue # 虚拟滚动选择组件
│ └── index.ts # 主入口文件
├── examples/ # Vue CLI 示例项目
├── dist/ # 构建输出目录
├── package.json
├── rollup.config.js
└── README.md
`

依赖

- Vue: 2.6.14
- Ant Design Vue: ^1.7.8
- vue-virtual-scroller: ^1.1.2

发布

`bash
npm publish
``

许可证

MIT