alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

types(Tabs): use tsx (#8187)

Browse Source
This commit is contained in:
neverland
2021-02-20 17:49:34 +08:00
committed by GitHub
parent 9ad0eafae0
commit 906f01cc8e
15 changed files with 106 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/tab/README.md
+6 -6
View File
@@ -267,11 +267,11 @@ export default {
| Event | Description | Arguments |
| --- | --- | --- |
| click | Emitted when a tab is clicked | name，title |
| change | Emitted when active tab changed | name，title |
| disabled | Emitted when a disabled tab is clicked | name，title |
| rendered | Emitted when content first rendered in lazy-render mode | name，title |
| scroll | Emitted when tab scrolling in sticky mode | object: { scrollTop, isFixed } |
| click | Emitted when a tab is clicked | _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_ |
| scroll | Emitted when tab scrolling in sticky mode | _{ scrollTop: number, isFixed: boolean }_ |
### Tabs Methods
@@ -280,7 +280,7 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Tabs i
| Name | Description | Attribute | Return value |
| --- | --- | --- | --- |
| resize | Resize Tabs when container element resized or visibility changed | - | - |
| scrollTo | Go to specified tab in scrollspy mode | name | - |
| scrollTo | Go to specified tab in scrollspy mode | _name: string \| number_ | - |
### Tabs Slots
src/tab/README.zh-CN.md
+6 -6
View File
@@ -278,11 +278,11 @@ export default {
| 事件名 | 说明 | 回调参数 |
| --- | --- | --- |
| click | 点击标签时触发 | name：标识符，title：标题 |
| change | 当前激活的标签改变时触发 | name：标识符，title：标题 |
| disabled | 点击被禁用的标签时触发 | name：标识符，title：标题 |
| rendered | 标签内容首次渲染时触发（仅在开启延迟渲染后触发） | name：标识符，title：标题 |
| scroll | 滚动时触发，仅在 sticky 模式下生效 | { scrollTop: 距离顶部位置, isFixed: 是否吸顶 } |
| click | 点击标签时触发 | _name: string \| number, title: string_ |
| change | 当前激活的标签改变时触发 | _name: string \| number, title: string_ |
| disabled | 点击被禁用的标签时触发 | _name: string \| number, title: string_ |
| rendered | 标签内容首次渲染时触发（仅在开启延迟渲染后触发） | _name: string \| number, title: string_ |
| scroll | 滚动时触发，仅在 sticky 模式下生效 | _{ scrollTop: number, isFixed: boolean }_ |
### Tabs 方法
@@ -291,7 +291,7 @@ export default {
| 方法名 | 说明 | 参数 | 返回值 |
| --- | --- | --- | --- |
| resize | 外层元素大小或组件显示状态变化时，可以调用此方法来触发重绘 | - | - |
| scrollTo | 滚动到指定的标签页，在滚动导航模式下可用 | name: 标识符 | - |
| scrollTo | 滚动到指定的标签页，在滚动导航模式下可用 | _name: string \| number_ | - |
### Tabs Slots
src/tab/index.js → src/tab/index.tsx
+9 -6
View File
@@ -1,6 +1,6 @@
import { ref, watch, nextTick } from 'vue';
import { ref, watch, nextTick, PropType, CSSProperties } from 'vue';
import { createNamespace, UnknownProp } from '../utils';
import { TABS_KEY } from '../tabs';
import { TABS_KEY, TabsProvide } from '../tabs';
// Composition
import { useParent } from '@vant/use';
@@ -20,15 +20,18 @@ export default createComponent({
title: String,
disabled: Boolean,
titleClass: UnknownProp,
titleStyle: null,
titleStyle: [String, Object] as PropType<string | CSSProperties>,
},
setup(props, { slots }) {
const inited = ref(false);
const { parent, index } = useParent(TABS_KEY);
const { parent, index } = useParent<TabsProvide>(TABS_KEY);
if (!parent) {
throw new Error('[Vant] Tabs: <van-tab> must be used inside <van-tabs>');
if (process.env.NODE_ENV !== 'production') {
console.error('[Vant] <Tab> must be a child component of <Tabs>.');
}
return;
}
const getName = () => props.name ?? index.value;
@@ -38,7 +41,7 @@ export default createComponent({
if (parent.props.lazyRender) {
nextTick(() => {
parent.emit('rendered', getName(), props.title);
parent.onRendered(getName(), props.title);
});
}
};