blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

feat(Tabs): click-tab event add disabled param (#9042)

Browse Source
This commit is contained in:
neverland 2021-07-16 11:37:36 +08:00 committed by GitHub
parent 88c75970ad
commit 83cf4ebd33
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 48 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/tab/README.md
View File

@ -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. By default more than 5 tabs, you can scroll through the tabs. You can set `swipe-threshold` attribute to customize threshold number.
```html ```html
<van-tabs> <van-tabs v-model:active="active">
<van-tab v-for="index in 8" :title="'tab' + index"> <van-tab v-for="index in 8" :title="'tab' + index">
content of tab {{ index }} content of tab {{ index }}
</van-tab> </van-tab>
@ -77,45 +77,32 @@ By default more than 5 tabs, you can scroll through the tabs. You can set `swipe
### Disabled Tab ### Disabled Tab
You can set `disabled` attribute on the corresponding `van-tab`. Use `disabled` prop to disable a tab.
```html ```html
<van-tabs @disabled="onClickDisabled"> <van-tabs v-model:active="active">
<van-tab v-for="index in 3" :title="'tab' + index" :disabled="index === 2"> <van-tab v-for="index in 3" :title="'tab' + index" :disabled="index === 2">
content of tab {{ index }} content of tab {{ index }}
</van-tab> </van-tab>
</van-tabs> </van-tabs>
``` ```
```js
import { Toast } from 'vant';
export default {
setup() {
const onClickDisabled = (name, title) => Toast(`${name} is disabled`);
return {
onClickDisabled,
};
},
};
```
### Card Style ### Card Style
Tabs styled as cards. Tabs styled as cards.
```html ```html
<van-tabs type="card"> <van-tabs v-model:active="active" type="card">
<van-tab v-for="index in 3" :title="'tab' + index"> <van-tab v-for="index in 3" :title="'tab' + index">
content of tab {{ index }} content of tab {{ index }}
</van-tab> </van-tab>
</van-tabs> </van-tabs>
``` ```
### Click Event ### Click Tab Event
```html ```html
<van-tabs @click="onClick"> <van-tabs v-model:active="active" @click-tab="onClickTab">
<van-tab v-for="index in 2" :title="'tab' + index"> <van-tab v-for="index in 2" :title="'tab' + index">
content of tab {{ index }} content of tab {{ index }}
</van-tab> </van-tab>
@ -127,9 +114,9 @@ import { Toast } from 'vant';
export default { export default {
setup() { setup() {
const onClick = (name, title) => Toast(title); const onClickTab = ({ title }) => Toast(title);
return { return {
onClick, onClickTab,
}; };
}, },
}; };
@ -199,7 +186,7 @@ In scrollspy mode, the list of content will be tiled.
### Before Change ### Before Change
```html ```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"> <van-tab v-for="index in 4" :title="'tab ' + index">
content {{ index }} content {{ index }}
</van-tab> </van-tab>
@ -207,8 +194,11 @@ In scrollspy mode, the list of content will be tiled.
``` ```
```js ```js
import { ref } from 'vue';
export default { export default {
setup() { setup() {
const active = ref(0);
const beforeChange = (index) => { const beforeChange = (index) => {
// prevent change // prevent change
if (index === 1) { if (index === 1) {
@ -222,6 +212,7 @@ export default {
}; };
return { return {
active,
beforeChange, beforeChange,
}; };
}, },
@ -273,13 +264,13 @@ export default {
| Event | Description | Arguments | | Event | Description | Arguments |
| --- | --- | --- | | --- | --- | --- |
| click-tab `v3.1.4` | Emitted when a tab is clicked | _{ name: string \| number, title: string, event: MouseEvent }_ | | click-tab `v3.1.4` | Emitted when a tab is clicked | _{ name: string \| number, title: string, event: MouseEvent, disabled: boolean }_ |
| click | Emitted when a tab is clicked (Deprecated) | _name: string \| number, title: string_ |
| change | Emitted when active tab changed | _name: string \| number, title: string_ | | 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_ | | 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 }_ | | 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 ### Tabs Methods
Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Tabs instance and call instance methods. Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Tabs instance and call instance methods.

43
src/tab/README.zh-CN.md
View File

@ -71,7 +71,7 @@ export default {
标签数量超过 5 个时，标签栏可以在水平方向上滚动，切换时会自动将当前标签居中。 标签数量超过 5 个时，标签栏可以在水平方向上滚动，切换时会自动将当前标签居中。
```html ```html
<van-tabs> <van-tabs v-model:active="active">
<van-tab v-for="index in 8" :title="'标签 ' + index"> <van-tab v-for="index in 8" :title="'标签 ' + index">
内容 {{ index }} 内容 {{ index }}
</van-tab> </van-tab>
@ -80,35 +80,22 @@ export default {
### 禁用标签 ### 禁用标签
设置 `disabled` 属性即可禁用标签，如果需要监听禁用标签的点击事件，可以在 `van-tabs` 上监听`disabled` 事件。 设置 `disabled` 属性即可禁用标签。
```html ```html
<van-tabs @disabled="onClickDisabled"> <van-tabs v-model:active="active">
<van-tab title="标签 1">内容 1</van-tab> <van-tab title="标签 1">内容 1</van-tab>
<van-tab title="标签 2" disabled>内容 2</van-tab> <van-tab title="标签 2" disabled>内容 2</van-tab>
<van-tab title="标签 3">内容 3</van-tab> <van-tab title="标签 3">内容 3</van-tab>
</van-tabs> </van-tabs>
``` ```
```js
import { Toast } from 'vant';
export default {
setup() {
const onClickDisabled = (name, title) => Toast(`${name}已被禁用`);
return {
onClickDisabled,
};
},
};
```
### 样式风格 ### 样式风格
`Tab` 支持两种样式风格：`line` 和`card`，默认为 `line` 样式，可以通过 `type` 属性切换样式风格。 `Tab` 支持两种样式风格：`line` 和`card`，默认为 `line` 样式，可以通过 `type` 属性切换样式风格。
```html ```html
<van-tabs type="card"> <van-tabs v-model:active="active" type="card">
<van-tab title="标签 1">内容 1</van-tab> <van-tab title="标签 1">内容 1</van-tab>
<van-tab title="标签 2">内容 2</van-tab> <van-tab title="标签 2">内容 2</van-tab>
<van-tab title="标签 3">内容 3</van-tab> <van-tab title="标签 3">内容 3</van-tab>
@ -117,23 +104,26 @@ export default {
### 点击事件 ### 点击事件
可以在 `van-tabs` 上绑定 `click` 事件，事件传参为标签对应的标识符和标题。 点击标签页时，会触发 `click-tab` 事件。
```html ```html
<van-tabs @click="onClick"> <van-tabs v-model:active="active" @click-tab="onClickTab">
<van-tab title="标签 1">内容 1</van-tab> <van-tab title="标签 1">内容 1</van-tab>
<van-tab title="标签 2">内容 2</van-tab> <van-tab title="标签 2">内容 2</van-tab>
</van-tabs> </van-tabs>
``` ```
```js ```js
import { ref } from 'vue';
import { Toast } from 'vant'; import { Toast } from 'vant';
export default { export default {
setup() { setup() {
const onClick = (name, title) => Toast(title); const active = ref(0);
const onClickTab = ({ title }) => Toast(title);
return { return {
onClick, active,
onClickTab,
}; };
}, },
}; };
@ -205,7 +195,7 @@ export default {
通过 `before-change` 属性可以在切换标签前执行特定的逻辑。 通过 `before-change` 属性可以在切换标签前执行特定的逻辑。
```html ```html
<van-tabs :before-change="beforeChange"> <van-tabs v-model:active="active" :before-change="beforeChange">
<van-tab v-for="index in 4" :title="'选项 ' + index"> <van-tab v-for="index in 4" :title="'选项 ' + index">
内容 {{ index }} 内容 {{ index }}
</van-tab> </van-tab>
@ -213,8 +203,11 @@ export default {
``` ```
```js ```js
import { ref } from 'vue';
export default { export default {
setup() { setup() {
const active = ref(0);
const beforeChange = (index) => { const beforeChange = (index) => {
// 返回 false 表示阻止此次切换 // 返回 false 表示阻止此次切换
if (index === 1) { if (index === 1) {
@ -280,13 +273,13 @@ export default {
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 |
| --- | --- | --- | | --- | --- | --- |
| click-tab `v3.1.4` | 点击标签时触发 | _{ name: string \| number, title: string, event: MouseEvent }_ | | click-tab `v3.1.4` | 点击标签时触发 | _{ name: string \| number, title: string, event: MouseEvent, disabled: boolean }_ |
| click | 点击标签时触发（已废弃，请使用 click-tab 事件） | _name: string \| number, title: string_ |
| change | 当前激活的标签改变时触发 | _name: string \| number, title: string_ | | change | 当前激活的标签改变时触发 | _name: string \| number, title: string_ |
| disabled | 点击被禁用的标签时触发 | _name: string \| number, title: string_ |
| rendered | 标签内容首次渲染时触发（仅在开启延迟渲染后触发） | _name: string \| number, title: string_ | | rendered | 标签内容首次渲染时触发（仅在开启延迟渲染后触发） | _name: string \| number, title: string_ |
| scroll | 滚动时触发，仅在 sticky 模式下生效 | _{ scrollTop: number, isFixed: boolean }_ | | scroll | 滚动时触发，仅在 sticky 模式下生效 | _{ scrollTop: number, isFixed: boolean }_ |
> 提示：click 和 disabled 事件已废弃，请使用 click-tab 事件代替。
### Tabs 方法 ### Tabs 方法
通过 ref 可以获取到 Tabs 实例并调用实例方法，详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。 通过 ref 可以获取到 Tabs 实例并调用实例方法，详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。

13
src/tab/demo/index.vue
View File

@ -24,7 +24,7 @@
</demo-block> </demo-block>
<demo-block :title="t('title3')"> <demo-block :title="t('title3')">
<van-tabs @disabled="onClickDisabled"> <van-tabs>
<van-tab <van-tab
v-for="index in 3" v-for="index in 3"
:title="t('tab') + index" :title="t('tab') + index"
@ -45,7 +45,7 @@
</demo-block> </demo-block>
<demo-block :title="t('title5')"> <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"> <van-tab v-for="index in 2" :title="t('tab') + index" :key="index">
{{ t('content') }} {{ index }} {{ t('content') }} {{ index }}
</van-tab> </van-tab>
@ -151,14 +151,10 @@ export default {
const tabs = [1, 2, 3, 4]; const tabs = [1, 2, 3, 4];
const onClick = (index: number, title: string) => { const onClickTab = ({ title }: { title: string }) => {
Toast(title); Toast(title);
}; };
const onClickDisabled = (index: number, title: string) => {
Toast(title + t('disabled'));
};
const beforeChange = (name: number) => { const beforeChange = (name: number) => {
if (name === 1) { if (name === 1) {
return false; return false;
@ -172,9 +168,8 @@ export default {
...toRefs(state), ...toRefs(state),
t, t,
tabs, tabs,
onClick, onClickTab,
beforeChange, beforeChange,
onClickDisabled,
}; };
}, },
}; };

1
src/tab/test/index.spec.tsx
View File

@ -45,6 +45,7 @@ test('should emit click-tab event when tab is clicked', async () => {
expect.objectContaining({ expect.objectContaining({
name: 0, name: 0,
title: 'title1', title: 'title1',
disabled: false,
}) })
); );
}); });

15
src/tabs/Tabs.tsx
View File

@ -297,7 +297,16 @@ export default defineComponent({
const { title, disabled } = children[index]; const { title, disabled } = children[index];
const name = getTabName(children[index], index); const name = getTabName(children[index], index);
emit('click-tab', {
name,
title,
event,
disabled,
});
if (disabled) { if (disabled) {
// @deprecated
// should be removed in next major version
emit('disabled', name, title); emit('disabled', name, title);
} else { } else {
callInterceptor({ callInterceptor({
@ -309,12 +318,6 @@ export default defineComponent({
}, },
}); });
emit('click-tab', {
name,
title,
event,
});
// @deprecated // @deprecated
// should be removed in next major version // should be removed in next major version
emit('click', name, title); emit('click', name, title);