-
Notifications
You must be signed in to change notification settings - Fork 269
[ospp]给Tree组件增加虚拟滚动功能
任务清单:https://github.com/orgs/opentiny/projects/5
git clone [email protected]:opentiny/tiny-vue.git
git checkout ospp-2024/001-tree-virtual-scroll
pnpm i --registry=https://registry.npmmirror.com
pnpm site
访问:http://localhost:3101/,进入 VirtualScroll 和 Tree 组件的 demo。
验证功能点:
- 封装通用的 VirtualScroll 虚拟滚动组件
- 基本的嵌套节点虚拟滚动
- 增删改场景的虚拟滚动
- 拖拽树场景的虚拟滚动
- 节点搜索场景的虚拟滚动
- E2E测试用例
- API/Demo文档
在 Vite+Vue3+TinyVue 和 Webpack(VueCLI)+Vue2+TinyVue 项目中安装和使用。
执行命令:
pnpm build:ui virtual-scroll
可以构建 virtual-scroll 组件的产物(tree组件同理),产物地址在 packages/dist2(vue2版本) 和 packages/dist3(vue3版本) 两个目录下。
发包之前可以将 @opentiny/vue-virtual-scroll
改成 @yourname/vue-virtual-scroll
,再到 dist3/@yourname/vue-virtual-scroll
下执行:npm publish --access public
进行发布。
virtual-scroll 组件依赖了 vue-renderless / vue-theme 两个包,需要在 package.json 中声明这两个包的依赖(目前缺失 vue-theme 的依赖)
发测试包进行验证时,需要同时修改 @opentiny/vue-renderless
为 @yourname/vue-renderless
,修改 @opentiny/vue-theme
为 @yourname/vue-theme
。
renderless 和 theme 发包指南参考:TinyVue构建发包指南
- 发布virtual-scroll的npm包之后,无法在Vite+Vue3项目中使用
已发布npm包:@kagol/vue-virtual-scroll
,在Vite+Vue3项目中安装这个包,然后拷贝virtual-scroll第一个demo进行使用,npm run dev 存在报错。
- API 文档书写不符合规范
- demo 中的 style 样式需要控制影响范围
- demo【滚动指定索引项目】不美观,体验不好
输入框和按钮之间应该有一定的间距,不需要居中,居左即可。
按照以下格式会好一些: 滚动到 tiny-numeric tiny-button(确定)
或者直接输入框内容一变化就直接触发滚动,不需要再点按钮,这样体验会好一些