Custom Ant Design Vue component library
npm install @yeepay/custom-antdv-lib一个基于 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
`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);
`
`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
}
}
`
` vue
v-model="selectedValue"
placeholder="请选择"
style="width: 200px"
/>
labelKey="name"
valueKey="id"
v-model="selectedId"
placeholder="请选择用户"
style="width: 250px"
/>
:showSearch="true"
v-model="selectedValue"
placeholder="搜索并选择"
style="width: 300px"
/>
:virtualScrollHeight="400"
v-model="selectedValue"
placeholder="自定义高度"
style="width: 200px"
/>
`
基于 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: '李四' }
];
// 使用自定义格式
labelKey="name"
valueKey="id"
/>
`
组件集成了 vue-virtual-scroller,能够高效处理大量数据:
- 性能优化:只渲染可见区域的选项
- 内存友好:大量数据时不会影响页面性能
- 流畅滚动:支持平滑的滚动体验
- 键盘导航:支持上下箭头键导航
`vue`
:virtualScrollHeight="400"
:itemSize="36"
:showSearch="true"
/>
启用搜索功能后,用户可以实时过滤选项:
`vue`
:showSearch="true"
@search="handleSearch"
/>
搜索功能特点:
- 实时过滤,无需额外配置
- 支持中文和英文搜索
- 不区分大小写
- 支持部分匹配
组件支持完整的键盘导航功能:
- ↑/↓ - 上下导航选项
- Enter - 选择当前高亮选项
- Esc - 关闭下拉菜单
`bash`
npm install
`bash`
npm run dev
`bash`
npm run build
启动 Vue CLI 开发服务器进行组件调试:
`bash`
npm run serve
这将在 http://localhost:8080 启动开发服务器,您可以在浏览器中查看和调试组件。
`bash`
npm run test
`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