mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
feat(Tabs): add resize method (#5071)
This commit is contained in:
parent
659eb3eefc
commit
a1a93ba11b
@ -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
|
||||
|
||||
|
@ -162,7 +162,7 @@ export default {
|
||||
|
||||
### Swipe 方法
|
||||
|
||||
通过 ref 可以获取到 swipe 实例并调用实例方法
|
||||
通过 ref 可以获取到 Swipe 实例并调用实例方法
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
|------|------|------|------|
|
||||
|
@ -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: 是否吸顶 } |
|
||||
|
@ -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;
|
||||
|
Loading…
x
Reference in New Issue
Block a user