[comp:Breadcrumb ] feature Breadcrumb component 面包屑

[mrliusu]

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

Breadcrumb

What does the proposed API look like?

Breadcrumb props

名称	说明	类型	默认值	全局配置	备注
has-return l 是否展示返回按钮	true	true	-	-	-
return-icon	返回的图标名	string	arrow-left	-	使用ix-icon组件的name值
separator	分隔符	string	>	-	-
breadcrumb-items	面包屑路径数据	Array	[]	-	会使用for循环创建breadcrumb-item;元素数据见下表

breadcrumb-items单个元素具体数据

名称	说明	类型	默认值	全局配置	备注
text	展示的文本	string	-	-	-
path	路径点击之后跳转的路由	string	-	-	-
to	路径点击之后跳转的路由参数	Object	-	-	配置了to属性，忽略掉path属性
href	路径点击之后，使用a标签的跳转，对于url可以使用这种	string	-	-	配置了href忽略掉path与to
unlink	是否展示非连接的样式,同时点击不会跳转，但是会执行clickItem	Boolean	最后一个元素默认 true; 其他元素默认false	-	面包屑最后一个路径默认unlink为true；其他路径默认unlink为false
clickItem	点击路径的回调	Function	-	-	参数为配置的该item; 调用此方法之后，会进行跳转，如果需要进行条件判断，可将跳转手动写在clickItem中

breadcrumb events

名称	说明	参数类型	备注
click	点击任意item的时候触发	[Object] 值为点击的breadcrumb-item的配置值	在clickItem之前emit

@zymoplastic @danranVm

[danranVm]

@zymoplastic @danranVm 负责此组件的 review， API 设计完成后请 @ 他们

[zymoplastic]

Breadcrumb

1. has-return 和 return-icon 感觉不需要做到基础组件里面, 即去掉返回按钮, 这个返回后面可以封装到 pro 里.
2. 有时分隔符可能需要用到 icon 之类的组件, 建议看下是否需要支持, 比如做成一个 slot, 或者是一个组件,
3. 如果实现了2, separator 属性可以不保留, 也可以保留, 这个看下 @danranVm 的意见. 如果保留, 需要支持全局配置, 且优先级低于 2, 这样业务使用较为便利, 因为 vue 的模板没法全局配置.

Breadcrumb-item

1. text 属性我感觉没必要了, 因为 item 本身是有插槽的, 只是在使用数组配置 items 的时候才需要.
2. clickItem 感觉不太贴切, 可以改下名字, 比如 beforeJump, beforeClick?
3. href 有什么应用场景吗?

[danranVm]

比较赞同 @zymoplastic 的观点，我们早期版本的 API 设计还是克制一点吧。

• ix-breadcrumb

  • separator，支持 string 和 slot 的格式，支持全局配置，
  • 其他都移除。

• ix-breadcrumb-item

  • 感觉可以全部移除，只需要提供一个 slot 就行了。:cry:
  • clickItem 也没有必要，用户可以在路由的钩子里去决定要不要跳转。

  <ix-breadcrumb>
    <ix-breadcrumb-item>Home</ix-breadcrumb-item>
    <ix-breadcrumb-item><a href="https://github.com/IduxFE/idux">Idux Repo</a></ix-breadcrumb-item>
    <ix-breadcrumb-item><a href="https://github.com/IduxFE/idux/issues">Idux issues</a></ix-breadcrumb-item>
    <ix-breadcrumb-item>Breadcrumb</ix-breadcrumb-item>
  </ix-breadcrumb>

我的建议是，初期我们提供一个主要是样式的组件，后面可以考虑如何更好的结合 vue-router 去做一些更加方便的功能，

[imguolao]

IxBreadcrumb

BreadcrumbProps

名称	说明	类型	默认值	全局配置	备注
separator	分隔符	string	/	-	-

IxBreadcrumbItem

BreadcrumbItemProps

名称	说明	类型	默认值	全局配置	备注
separator	分隔符	string | #separator	-	-	-

[danranVm]

BreadcrumbItemProps 里的 separator 不要了吧，
BreadcrumbProps 里的 separator 支持一下插槽，参数可以把子组件的 key 作为参数。