关于 List 组件开发相关

[Tyh2001]

List 列表

说明

分为两个组件 f-list 和 f-list-item

设计稿

https://www.figma.com/file/iPQwcLbuH3aFklm9IATT00/List-%E5%88%97%E8%A1%A8?node-id=0%3A1

List Attributes

• show-num 是否展示编号
• zebra 是否展示斑马纹
• hover-show 是否在 hover 状态展示投影效果
• important-list 重点行，传入一个 number[] 类型。重点行会高亮
• text-color 字体颜色
• border-color 边框颜色
• background 背景色
• size 不同尺寸
• split 是否显示分割线
• max-height 最大高度，超出滚动
• center 是否居中

List Slots

• default 默认信息
• header 头部信息
• footer 页脚信息

List-Item Attributes

——

List-Item Slots

• default 默认信息
• option 左侧选项信息

[Tyh2001]

show-num 未实现？
hover-show 未实现？
maxHeight 配置项有问题，参考下面代码：

  <f-list maxHeight="100px">
    <f-list-item>你好啊这是一个列表</f-list-item>
    <f-list-item>你好啊这是一个列表</f-list-item>
    <f-list-item>你好啊这是一个列表</f-list-item>
    <f-list-item>你好啊这是一个列表</f-list-item>
    <f-list-item>你好啊这是一个列表</f-list-item>
  </f-list>

@HYzihong

[HYzihong]

maxHeight 这个我看见好像没啥问题（可能是没看到问题）
hover-show、show-num代码我还在努力~

[Tyh2001]

上图是 maxHeight 的问题，会给每个 f-list-item 添加，应该是给 f-list 添加

show-num 就是显示编号，其实将 f-list 的 ul 标签转换成 ol 即可实现

hover-show 效果可以参考我之前写的组件库 over 状态展示投影

@HYzihong

[HYzihong]

好的，就是f-list-item的自己border没了，f-list显示border了

[Tyh2001]

没错~

[HYzihong]

f-list-item我觉得也可以默认自适应高度，配置maxHeight 时，也设置max-height怎么样

[Tyh2001]

可以的。f-list-item 应该是自适应高度的

[HYzihong]

ok

[Tyh2001]

可能后面还会新增无序列表和有序列表，前面是数字或者点

[HYzihong]

成，我觉得可以

[Tyh2001]

最近差点忘记了这个组件，发现文档还都没写。。。。

然后组件内部我看了下，优化了非常多的地方，你可以看下

b7724c9

@HYzihong