[comp: tabs]: add component tabs

[LaamGinghong]

Tabs API

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

What problem does this feature solve?

用于需要进行页面选项卡切换，又不希望进行路由切换。

What does the proposed API look like?

• 提供卡片式和选项式两种样式的 tabs；
• 提供禁用功能允许禁止跳转其中某项；
• tabs 和 content 有上下、左右两种分布；
• tabs 对外暴露 left-extra 和 right-extra 两个插槽；
• tabs 有三个大小；
• tab 有关闭按钮允许用户点击关闭当前 tab；
• tabs 切换默认会销毁对应子组件，可以通过传入prop让组件 memo，也可以对单独某个 tab 配置是否需要 memo。

何时使用

需要进行tab切换，又不希望进行路由跳转时。

API

ix-tabs

Props

名称	说明	类型	默认值	全局配置	备注
active | v-model	当前显示的选项卡	any	第一个选项卡的 value	-	-
type	选项卡风格样式	card | line	-	✅	-
closable	选项卡是否显示关闭按钮	boolean	-	-	-
size	选项卡大小	small | large	-	✅	不传默认大小
position	选项卡位置	left | top	top	-	-
showAdd	显示添加按钮	boolean	-	-	-
tabGutter	选项卡之间的间隙	number	-	✅	-
memo	是否记忆选项卡子组件	boolean	-	✅	-

Emits

名称	说明	类型
change	选项卡切换回调	(active: any) => void
clickTab	点击选项卡回调	(active: any, event: MouseEvent) => void
clickClose	点击选项卡关闭回调	(active: any) => void
clickAdd	点击增加按钮回调	() => void

Slots

名称	说明
default	选项卡
leftExtra	左操作区
rightExtra	右操作区

ix-tab

Props

名称	说明	类型	默认值	全局配置	备注
value	选项卡的唯一值	any	-	-	-
disabled	是否禁用选项卡	boolean	-	-	-
label	选项卡标题	string | v-slot: label	-	-	-
showClose	是否显示关闭按钮	boolean	-	✅	-
memo	是否记忆当前子组件	boolean	-	-	-

Slots

名称	说明
default	选项卡子组件内容

[LaamGinghong]

@danranVm 请review

[danranVm]

• active 相关的 API 与 @Usualminds 沟通一下，需要和 [comp: collapse] add collapse component #70 组件统一。

• ix-tabs

  • size 应该是 'large', 'medium', 'small' , 默认为 medium
  • 考虑是否要新增一个 props: canDeactivate, 决定一个 tab 是否可以被切换的钩子
  • clickTab 应该是 ix-tab 的 emit
  • clickClose => close
  • clickAdd => add
  • extra 只需要一个

• ix-tab

  • showClose => closable
  • 是否考虑新增一个 API，用于决定在 tab 初始化为 隐藏状态的时候，不渲染子组件内容。

[Usualminds]

• active 相关的 API 与 @Usualminds 沟通一下，需要和 [comp: collapse] add collapse component #70 组件统一。

@danranVm @LaamGinghong 统一更改为 active

[LaamGinghong]

clickTab 应该是 ix-tab 的 emit

这个API放在父组件的原因仅仅是在于：

1. 我希望所有的事件都在父组件进行控制；
2. 这个API和change的区别是change是仅仅在改变时才会触发，click是无论何时都会触发

[LaamGinghong]

考虑是否要新增一个 props: canDeactivate, 决定一个 tab 是否可以被切换的钩子

这个我觉得没有必要，因为子组件有disabled

[LaamGinghong]

是否考虑新增一个 API，用于决定在 tab 初始化为 隐藏状态的时候，不渲染子组件内容。

我的想法是按需渲染，不存在隐藏的时候会渲染的情况。

如果需要隐藏状态下全部渲染，要重新调整API

[LaamGinghong]

Tabs API

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

What problem does this feature solve?

用于需要进行页面选项卡切换，又不希望进行路由切换。

What does the proposed API look like?

• 默认提供两种 tabs 样式
• 允许用户手动控制打开那个 tab
• tabs 有上下、左右两种布局
• 对外暴露 leftExtra 和 rightExtra 两个插槽用于 tabs 前后两个功能区
• 允许用户点击关闭按钮关闭当前 tab
• tabs 默认提供三种大小
• tabs 会默认销毁隐藏的子组件，可以通过设置 memo 对所有子组件或者特定子组件进行记忆

API

ix-tabs

Props

名称	说明	类型	默认值	全局配置	备注
active | v-model	当前聚焦的 tab	any	第一个 tab 的 value	-	-
type	选项卡的样式	line | card	line	✅	-
closable	选项卡是否可关闭	boolean	false	✅	-
size	选项卡大小	small | medium | large	medium	✅	-
tabPosition	选项卡位置	top | left	top	-	-
tabGutter	选项卡之间间隙	number	0	✅	当且仅当 type = card 时才生效
memo	选项卡缓存	boolean	false	-	-

Emits

名称	说明	类型
click	点击选项卡回调	(active: any, event: MouseEvent) => void
close	点击选项卡关闭按钮回调	(active: any) => void

Slots

名称	说明
default	选项卡
leftExtra	左操作区
rightExtra	右操作区

ix-tab

Props

名称	说明	类型	默认值	全局配置	备注
value	选项卡唯一值	any	-	-	请保证同级别唯一，会作为 key 使用
disabled	是否禁用选项卡	boolean	false	-	无法切换到已禁用的选项卡，若通过数据进行切换，会自动切换回第一个可以切换的选项卡
title	选项卡标题	string	-	-	-
memo	是否缓存当前选项卡	boolean	false	-	-

Slots

名称	说明
default	选项卡内容
title	选项卡标题

[LaamGinghong]

@danranVm 重新设计了API