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

This commit is contained in:
neverland 2019-11-21 17:18:38 +08:00 committed by GitHub
parent 659eb3eefc
commit a1a93ba11b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 43 additions and 22 deletions

View File

@ -156,12 +156,12 @@ export default {
### Swipe Methods
Use ref to get swipe instance and call instance methods
Use ref to get Swipe instance and call instance methods
| Name | Description | Attribute | Return value |
|------|------|------|------|
| swipeTo | Swipe to target index | index: target index, options: Options | void |
| resize | Resize swipe when container element resized | - | void |
| resize | Resize Swipe when container element resized | - | void |
### swipeTo Options

View File

@ -162,7 +162,7 @@ export default {
### Swipe 方法
通过 ref 可以获取到 swipe 实例并调用实例方法
通过 ref 可以获取到 Swipe 实例并调用实例方法
| 方法名 | 说明 | 参数 | 返回值 |
|------|------|------|------|

View File

@ -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 | namename of current tabtitle: tab title |
| change | Triggered when active tab changed | namename of current tabtitle: tab title |
| disabled | Triggered when click disabled tab | namename 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 | namename of current tabtitle: tab title |
| change | Triggered when active tab changed | namename of current tabtitle: tab title |
| disabled | Triggered when click disabled tab | namename of current tab, title: tab title |
| scroll | Triggered when tab scroll in sticky mode | object: { scrollTop, isFixed } |

View File

@ -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: 是否吸顶 } |

View File

@ -16,7 +16,7 @@ export default createComponent({
mixins: [
ParentMixin('vanTabs'),
BindEventMixin(function(bind) {
bind(window, 'resize', this.setLine, true);
bind(window, 'resize', this.resize, true);
})
],
@ -139,6 +139,11 @@ export default createComponent({
},
methods: {
// @exposed-api
resize() {
this.setLine();
},
onShow() {
this.$nextTick(() => {
this.inited = true;