mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-25 10:56:35 +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
|
### 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 |
|
| Name | Description | Attribute | Return value |
|
||||||
|------|------|------|------|
|
|------|------|------|------|
|
||||||
| swipeTo | Swipe to target index | index: target index, options: Options | void |
|
| 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
|
### swipeTo Options
|
||||||
|
|
||||||
|
@ -162,7 +162,7 @@ export default {
|
|||||||
|
|
||||||
### Swipe 方法
|
### 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 |
|
| 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 |
|
| 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
|
### Tabs Slots
|
||||||
|
|
||||||
| Name | Description |
|
| Name | Description |
|
||||||
@ -219,12 +236,3 @@ In swipeable mode, you can switch tabs with swipe gestrue in the content
|
|||||||
|------|------|
|
|------|------|
|
||||||
| default | Content of tab |
|
| default | Content of tab |
|
||||||
| title | Custom tab title |
|
| 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 |
|
| to | 点击后跳转的目标路由对象,同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | *string \| object* | - | 2.2.1 |
|
||||||
| replace | 是否在跳转时替换当前页面历史 | *boolean* | `false` | 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
|
### Tabs Slots
|
||||||
|
|
||||||
| 名称 | 说明 |
|
| 名称 | 说明 |
|
||||||
@ -223,12 +240,3 @@ export default {
|
|||||||
|------|------|
|
|------|------|
|
||||||
| default | 标签页内容 |
|
| default | 标签页内容 |
|
||||||
| title | 自定义标题,不支持动态渲染 |
|
| title | 自定义标题,不支持动态渲染 |
|
||||||
|
|
||||||
### Tabs Events
|
|
||||||
|
|
||||||
| 事件名 | 说明 | 回调参数 |
|
|
||||||
|------|------|------|
|
|
||||||
| click | 点击标签时触发 | name:标签标识符,title:标题 |
|
|
||||||
| change | 当前激活的标签改变时触发 | name:标签标识符,title:标题 |
|
|
||||||
| disabled | 点击被禁用的标签时触发 | name:标签标识符,title:标题 |
|
|
||||||
| scroll | 滚动时触发,仅在 sticky 模式下生效 | { scrollTop: 距离顶部位置, isFixed: 是否吸顶 } |
|
|
||||||
|
@ -16,7 +16,7 @@ export default createComponent({
|
|||||||
mixins: [
|
mixins: [
|
||||||
ParentMixin('vanTabs'),
|
ParentMixin('vanTabs'),
|
||||||
BindEventMixin(function(bind) {
|
BindEventMixin(function(bind) {
|
||||||
bind(window, 'resize', this.setLine, true);
|
bind(window, 'resize', this.resize, true);
|
||||||
})
|
})
|
||||||
],
|
],
|
||||||
|
|
||||||
@ -139,6 +139,11 @@ export default createComponent({
|
|||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
|
// @exposed-api
|
||||||
|
resize() {
|
||||||
|
this.setLine();
|
||||||
|
},
|
||||||
|
|
||||||
onShow() {
|
onShow() {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.inited = true;
|
this.inited = true;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user