Skip to content

[ospp]给Tree组件增加虚拟滚动功能

Kagol edited this page Sep 26, 2024 · 9 revisions

任务清单: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。

验证功能点:

  1. 封装通用的 VirtualScroll 虚拟滚动组件
  2. 基本的嵌套节点虚拟滚动
  3. 增删改场景的虚拟滚动
  4. 拖拽树场景的虚拟滚动
  5. 节点搜索场景的虚拟滚动
  6. E2E测试用例
  7. API/Demo文档

发布 alpha 版本验证

在 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构建发包指南

问题

  1. 发布virtual-scroll的npm包之后,无法在Vite+Vue3项目中使用

已发布npm包:@kagol/vue-virtual-scroll,在Vite+Vue3项目中安装这个包,然后拷贝virtual-scroll第一个demo进行使用,npm run dev 存在报错。

image

  1. API 文档书写不符合规范

image

  1. demo 中的 style 样式需要控制影响范围

image

  1. demo【滚动指定索引项目】不美观,体验不好

输入框和按钮之间应该有一定的间距,不需要居中,居左即可。

按照以下格式会好一些: 滚动到 tiny-numeric tiny-button(确定)

或者直接输入框内容一变化就直接触发滚动,不需要再点按钮,这样体验会好一些

image

后续优化点