mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-05 19:41:42 +08:00
feat(Tabs): click-tab event add disabled param (#9042)
This commit is contained in:
neverland
GitHub
parent
88c75970ad
commit
83cf4ebd33
@ -68,7 +68,7 @@ export default {
|
||||
By default more than 5 tabs, you can scroll through the tabs. You can set `swipe-threshold` attribute to customize threshold number.
|
||||
|
||||
```html
|
||||
<van-tabs>
|
||||
<van-tabs v-model:active="active">
|
||||
<van-tab v-for="index in 8" :title="'tab' + index">
|
||||
content of tab {{ index }}
|
||||
</van-tab>
|
||||
@ -77,45 +77,32 @@ By default more than 5 tabs, you can scroll through the tabs. You can set `swipe
|
||||
|
||||
### Disabled Tab
|
||||
|
||||
You can set `disabled` attribute on the corresponding `van-tab`.
|
||||
Use `disabled` prop to disable a tab.
|
||||
|
||||
```html
|
||||
<van-tabs @disabled="onClickDisabled">
|
||||
<van-tabs v-model:active="active">
|
||||
<van-tab v-for="index in 3" :title="'tab' + index" :disabled="index === 2">
|
||||
content of tab {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
```
|
||||
|
||||
```js
|
||||
import { Toast } from 'vant';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const onClickDisabled = (name, title) => Toast(`${name} is disabled`);
|
||||
return {
|
||||
onClickDisabled,
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Card Style
|
||||
|
||||
Tabs styled as cards.
|
||||
|
||||
```html
|
||||
<van-tabs type="card">
|
||||
<van-tabs v-model:active="active" type="card">
|
||||
<van-tab v-for="index in 3" :title="'tab' + index">
|
||||
content of tab {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
```
|
||||
|
||||
### Click Event
|
||||
### Click Tab Event
|
||||
|
||||
```html
|
||||
<van-tabs @click="onClick">
|
||||
<van-tabs v-model:active="active" @click-tab="onClickTab">
|
||||
<van-tab v-for="index in 2" :title="'tab' + index">
|
||||
content of tab {{ index }}
|
||||
</van-tab>
|
||||
@ -127,9 +114,9 @@ import { Toast } from 'vant';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const onClick = (name, title) => Toast(title);
|
||||
const onClickTab = ({ title }) => Toast(title);
|
||||
return {
|
||||
onClick,
|
||||
onClickTab,
|
||||
};
|
||||
},
|
||||
};
|
||||
@ -199,7 +186,7 @@ In scrollspy mode, the list of content will be tiled.
|
||||
### Before Change
|
||||
|
||||
```html
|
||||
<van-tabs :before-change="beforeChange">
|
||||
<van-tabs v-model:active="active" :before-change="beforeChange">
|
||||
<van-tab v-for="index in 4" :title="'tab ' + index">
|
||||
content {{ index }}
|
||||
</van-tab>
|
||||
@ -207,8 +194,11 @@ In scrollspy mode, the list of content will be tiled.
|
||||
```
|
||||
|
||||
```js
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const active = ref(0);
|
||||
const beforeChange = (index) => {
|
||||
// prevent change
|
||||
if (index === 1) {
|
||||
@ -222,6 +212,7 @@ export default {
|
||||
};
|
||||
|
||||
return {
|
||||
active,
|
||||
beforeChange,
|
||||
};
|
||||
},
|
||||
@ -273,13 +264,13 @@ export default {
|
||||
|
||||
| Event | Description | Arguments |
|
||||
| --- | --- | --- |
|
||||
| click-tab `v3.1.4` | Emitted when a tab is clicked | _{ name: string \| number, title: string, event: MouseEvent }_ |
|
||||
| click | Emitted when a tab is clicked (Deprecated) | _name: string \| number, title: string_ |
|
||||
| click-tab `v3.1.4` | Emitted when a tab is clicked | _{ name: string \| number, title: string, event: MouseEvent, disabled: boolean }_ |
|
||||
| change | Emitted when active tab changed | _name: string \| number, title: string_ |
|
||||
| disabled | Emitted when a disabled tab is clicked | _name: string \| number, title: string_ |
|
||||
| rendered | Emitted when content first rendered in lazy-render mode | _name: string \| number, title: string_ |
|
||||
| scroll | Emitted when tab scrolling in sticky mode | _{ scrollTop: number, isFixed: boolean }_ |
|
||||
|
||||
> Tips：click and disabled event is deprecated，place use click-tab event instead.
|
||||
|
||||
### Tabs Methods
|
||||
|
||||
Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Tabs instance and call instance methods.
|
||||
|
||||
@ -71,7 +71,7 @@ export default {
|
||||
标签数量超过 5 个时，标签栏可以在水平方向上滚动，切换时会自动将当前标签居中。
|
||||
|
||||
```html
|
||||
<van-tabs>
|
||||
<van-tabs v-model:active="active">
|
||||
<van-tab v-for="index in 8" :title="'标签 ' + index">
|
||||
内容 {{ index }}
|
||||
</van-tab>
|
||||
@ -80,35 +80,22 @@ export default {
|
||||
|
||||
### 禁用标签
|
||||
|
||||
设置 `disabled` 属性即可禁用标签，如果需要监听禁用标签的点击事件，可以在 `van-tabs` 上监听`disabled` 事件。
|
||||
设置 `disabled` 属性即可禁用标签。
|
||||
|
||||
```html
|
||||
<van-tabs @disabled="onClickDisabled">
|
||||
<van-tabs v-model:active="active">
|
||||
<van-tab title="标签 1">内容 1</van-tab>
|
||||
<van-tab title="标签 2" disabled>内容 2</van-tab>
|
||||
<van-tab title="标签 3">内容 3</van-tab>
|
||||
</van-tabs>
|
||||
```
|
||||
|
||||
```js
|
||||
import { Toast } from 'vant';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const onClickDisabled = (name, title) => Toast(`${name}已被禁用`);
|
||||
return {
|
||||
onClickDisabled,
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 样式风格
|
||||
|
||||
`Tab` 支持两种样式风格：`line` 和`card`，默认为 `line` 样式，可以通过 `type` 属性切换样式风格。
|
||||
|
||||
```html
|
||||
<van-tabs type="card">
|
||||
<van-tabs v-model:active="active" type="card">
|
||||
<van-tab title="标签 1">内容 1</van-tab>
|
||||
<van-tab title="标签 2">内容 2</van-tab>
|
||||
<van-tab title="标签 3">内容 3</van-tab>
|
||||
@ -117,23 +104,26 @@ export default {
|
||||
|
||||
### 点击事件
|
||||
|
||||
可以在 `van-tabs` 上绑定 `click` 事件，事件传参为标签对应的标识符和标题。
|
||||
点击标签页时，会触发 `click-tab` 事件。
|
||||
|
||||
```html
|
||||
<van-tabs @click="onClick">
|
||||
<van-tabs v-model:active="active" @click-tab="onClickTab">
|
||||
<van-tab title="标签 1">内容 1</van-tab>
|
||||
<van-tab title="标签 2">内容 2</van-tab>
|
||||
</van-tabs>
|
||||
```
|
||||
|
||||
```js
|
||||
import { ref } from 'vue';
|
||||
import { Toast } from 'vant';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const onClick = (name, title) => Toast(title);
|
||||
const active = ref(0);
|
||||
const onClickTab = ({ title }) => Toast(title);
|
||||
return {
|
||||
onClick,
|
||||
active,
|
||||
onClickTab,
|
||||
};
|
||||
},
|
||||
};
|
||||
@ -205,7 +195,7 @@ export default {
|
||||
通过 `before-change` 属性可以在切换标签前执行特定的逻辑。
|
||||
|
||||
```html
|
||||
<van-tabs :before-change="beforeChange">
|
||||
<van-tabs v-model:active="active" :before-change="beforeChange">
|
||||
<van-tab v-for="index in 4" :title="'选项 ' + index">
|
||||
内容 {{ index }}
|
||||
</van-tab>
|
||||
@ -213,8 +203,11 @@ export default {
|
||||
```
|
||||
|
||||
```js
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const active = ref(0);
|
||||
const beforeChange = (index) => {
|
||||
// 返回 false 表示阻止此次切换
|
||||
if (index === 1) {
|
||||
@ -280,13 +273,13 @@ export default {
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
| --- | --- | --- |
|
||||
| click-tab `v3.1.4` | 点击标签时触发 | _{ name: string \| number, title: string, event: MouseEvent }_ |
|
||||
| click | 点击标签时触发（已废弃，请使用 click-tab 事件） | _name: string \| number, title: string_ |
|
||||
| click-tab `v3.1.4` | 点击标签时触发 | _{ name: string \| number, title: string, event: MouseEvent, disabled: boolean }_ |
|
||||
| change | 当前激活的标签改变时触发 | _name: string \| number, title: string_ |
|
||||
| disabled | 点击被禁用的标签时触发 | _name: string \| number, title: string_ |
|
||||
| rendered | 标签内容首次渲染时触发（仅在开启延迟渲染后触发） | _name: string \| number, title: string_ |
|
||||
| scroll | 滚动时触发，仅在 sticky 模式下生效 | _{ scrollTop: number, isFixed: boolean }_ |
|
||||
|
||||
> 提示：click 和 disabled 事件已废弃，请使用 click-tab 事件代替。
|
||||
|
||||
### Tabs 方法
|
||||
|
||||
通过 ref 可以获取到 Tabs 实例并调用实例方法，详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('title3')">
|
||||
<van-tabs @disabled="onClickDisabled">
|
||||
<van-tabs>
|
||||
<van-tab
|
||||
v-for="index in 3"
|
||||
:title="t('tab') + index"
|
||||
@ -45,7 +45,7 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('title5')">
|
||||
<van-tabs @click="onClick">
|
||||
<van-tabs @click-tab="onClickTab">
|
||||
<van-tab v-for="index in 2" :title="t('tab') + index" :key="index">
|
||||
{{ t('content') }} {{ index }}
|
||||
</van-tab>
|
||||
@ -151,14 +151,10 @@ export default {
|
||||
|
||||
const tabs = [1, 2, 3, 4];
|
||||
|
||||
const onClick = (index: number, title: string) => {
|
||||
const onClickTab = ({ title }: { title: string }) => {
|
||||
Toast(title);
|
||||
};
|
||||
|
||||
const onClickDisabled = (index: number, title: string) => {
|
||||
Toast(title + t('disabled'));
|
||||
};
|
||||
|
||||
const beforeChange = (name: number) => {
|
||||
if (name === 1) {
|
||||
return false;
|
||||
@ -172,9 +168,8 @@ export default {
|
||||
...toRefs(state),
|
||||
t,
|
||||
tabs,
|
||||
onClick,
|
||||
onClickTab,
|
||||
beforeChange,
|
||||
onClickDisabled,
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
@ -45,6 +45,7 @@ test('should emit click-tab event when tab is clicked', async () => {
|
||||
expect.objectContaining({
|
||||
name: 0,
|
||||
title: 'title1',
|
||||
disabled: false,
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
@ -297,7 +297,16 @@ export default defineComponent({
|
||||
const { title, disabled } = children[index];
|
||||
const name = getTabName(children[index], index);
|
||||
|
||||
emit('click-tab', {
|
||||
name,
|
||||
title,
|
||||
event,
|
||||
disabled,
|
||||
});
|
||||
|
||||
if (disabled) {
|
||||
// @deprecated
|
||||
// should be removed in next major version
|
||||
emit('disabled', name, title);
|
||||
} else {
|
||||
callInterceptor({
|
||||
@ -309,12 +318,6 @@ export default defineComponent({
|
||||
},
|
||||
});
|
||||
|
||||
emit('click-tab', {
|
||||
name,
|
||||
title,
|
||||
event,
|
||||
});
|
||||
|
||||
// @deprecated
|
||||
// should be removed in next major version
|
||||
emit('click', name, title);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user