feat(Tabs): add resize method (#5071)

2019-11-21 17:18:38 +08:00
parent 659eb3eefc
commit a1a93ba11b
5 changed files with 43 additions and 22 deletions
@@ -206,6 +206,23 @@ In swipeable mode, you can switch tabs with swipe gestrue in the content
 | to | Target route of the link, same as to of vue-router | *string \| object* | - | 2.2.1 |
 | replace | If true, the navigation will not leave a history record | *boolean* | `false` | 2.2.1 |

+### Tabs Events
+
+| Event | Description | Arguments |
+|------|------|------|
+| click | Triggered when click tab | name：name of current tab，title: tab title |
+| change | Triggered when active tab changed | name：name of current tab，title: tab title |
+| disabled | Triggered when click disabled tab | name：name of current tab, title: tab title |
+| scroll | Triggered when tab scroll in sticky mode | object: { scrollTop, isFixed } |
+
+### Tabs Methods
+
+Use ref to get Tabs instance and call instance methods
+
+| Name | Description | Attribute | Return value |
+|------|------|------|------|
+| resize | Resize Tabs when container element resized | - | void |
+
 ### Tabs Slots

 | Name | Description |
@@ -219,12 +236,3 @@ In swipeable mode, you can switch tabs with swipe gestrue in the content
 |------|------|
 | default | Content of tab |
 | title | Custom tab title |
-
-### Tabs Events
-
-| Event | Description | Arguments |
-|------|------|------|
-| click | Triggered when click tab | name：name of current tab，title: tab title |
-| change | Triggered when active tab changed | name：name of current tab，title: tab title |
-| disabled | Triggered when click disabled tab | name：name of current tab, title: tab title |
-| scroll | Triggered when tab scroll in sticky mode | object: { scrollTop, isFixed } |
@@ -210,6 +210,23 @@ export default {
 | to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | *string \| object* | - | 2.2.1 |
 | replace | 是否在跳转时替换当前页面历史 | *boolean* | `false` | 2.2.1 |

+### Tabs Events
+
+| 事件名 | 说明 | 回调参数 |
+|------|------|------|
+| click | 点击标签时触发 | name：标签标识符，title：标题 |
+| change | 当前激活的标签改变时触发 | name：标签标识符，title：标题 |
+| disabled | 点击被禁用的标签时触发 | name：标签标识符，title：标题 |
+| scroll | 滚动时触发，仅在 sticky 模式下生效 | { scrollTop: 距离顶部位置, isFixed: 是否吸顶 } |
+
+### Tabs 方法
+
+通过 ref 可以获取到 Tabs 实例并调用实例方法
+
+| 方法名 | 说明 | 参数 | 返回值 |
+|------|------|------|------|
+| resize | 外层元素大小变化后，可以调用此方法来触发重绘 | - | void |
+
 ### Tabs Slots

 | 名称 | 说明 |
@@ -223,12 +240,3 @@ export default {
 |------|------|
 | default | 标签页内容 |
 | title | 自定义标题，不支持动态渲染 |
-
-### Tabs Events
-
-| 事件名 | 说明 | 回调参数 |
-|------|------|------|
-| click | 点击标签时触发 | name：标签标识符，title：标题 |
-| change | 当前激活的标签改变时触发 | name：标签标识符，title：标题 |
-| disabled | 点击被禁用的标签时触发 | name：标签标识符，title：标题 |
-| scroll | 滚动时触发，仅在 sticky 模式下生效 | { scrollTop: 距离顶部位置, isFixed: 是否吸顶 } |