Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(tabs, taro): 开启 title-scroll 时不再需要设置 name #2789

Merged
merged 2 commits into from
Dec 22, 2023
Merged

feat(tabs, taro): 开启 title-scroll 时不再需要设置 name #2789

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
014d698
feat(tabs, taro): title-scroll 不再需要设置 name
eiinu Dec 21, 2023
43a30b9
fix: update
eiinu Dec 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/packages/__VUE/tabs/doc.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,8 +84,8 @@ app.use(TabPane);

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| title | 标题 | string | |
| pane-key | 标签 Key , 匹配的标识符 | string | 默认索引 0,1,2... |
| title | 标题 | string | - |
| pane-key | 标签 Key , 匹配的标识符 | string | - |
| disabled | 是否禁用标签 | boolean | false |

### TabPane Slots
Expand Down
6 changes: 3 additions & 3 deletions src/packages/__VUE/tabs/doc.taro.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ app.use(TabPane);
| title-gutter | 标签间隙 | number \| string | `0` |
| size | 标签栏字体尺寸大小 可选值 large normal small | string | `normal` |
| auto-height | 自动高度。设置为 true 时，nut-tabs 和 nut-tabs\_\_content 会随着当前 nut-tab-pane 的高度而发生变化。 | boolean | `false` |
| name | 在`taro`环境下，必须设置`name`以开启标题栏自动滚动功能。 | string | '' |
| name `v4.2.5 废弃` | 必须设置 name 才能开启 title-scroll 功能，版本 >=4.2.5 时不再需要。 | string | '' |

### Tabs Slots

Expand All @@ -82,8 +82,8 @@ app.use(TabPane);

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| title | 标题 | string | |
| pane-key | 标签 Key , 匹配的标识符 | string | 默认索引 0,1,2... |
| title | 标题 | string | - |
| pane-key | 标签 Key , 匹配的标识符 | string | - |
| disabled | 是否禁用标签 | boolean | false |

### TabPane Slots
Expand Down
30 changes: 12 additions & 18 deletions src/packages/__VUE/tabs/index.taro.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<view ref="container" class="nut-tabs" :class="[direction]">
<nut-scroll-view
:id="`nut-tabs__titles_${name}`"
:id="`nut-tabs__titles_${refRandomId}`"
:scroll-x="getScrollX"
:scroll-y="getScrollY"
:scroll-with-animation="scrollWithAnimation"
Expand Down Expand Up @@ -143,15 +143,12 @@ export default create({
top: {
type: Number,
default: 0
},
name: {
type: String,
default: ''
}
},
emits: ['update:modelValue', 'click', 'change'],

setup(props: any, { emit, slots }: any) {
const refRandomId = Math.random().toString(36).slice(-8);
const container = ref(null);
provide('tabsOpiton', {
activeKey: computed(() => props.modelValue || '0'),
Expand Down Expand Up @@ -231,27 +228,25 @@ export default create({
const titleRectRef = ref<RectItem[]>([]);
const canShowLabel = ref(false);
const scrollIntoView = () => {
if (!props.name) return;

raf(() => {
Promise.all([
getRect(`#nut-tabs__titles_${props.name}`),
getAllRect(`#nut-tabs__titles_${props.name} .nut-tabs__titles-item`)
getRect(`#nut-tabs__titles_${refRandomId}`),
getAllRect(`#nut-tabs__titles_${refRandomId} .nut-tabs__titles-item`)
]).then(([navRect, titleRects]: any) => {
navRectRef.value = navRect;
titleRectRef.value = titleRects;

if (navRectRef.value) {
if (props.direction === 'vertical') {
const titlesTotalHeight = titleRects.reduce((prev: number, curr: RectItem) => prev + curr.height, 0);
if (titlesTotalHeight > navRectRef.value.height) {
const titlesTotalHeight = titleRects.reduce((prev: number, curr: RectItem) => prev + curr?.height, 0);
if (titlesTotalHeight > navRectRef.value?.height) {
canShowLabel.value = true;
} else {
canShowLabel.value = false;
}
} else {
const titlesTotalWidth = titleRects.reduce((prev: number, curr: RectItem) => prev + curr.width, 0);
if (titlesTotalWidth > navRectRef.value.width) {
const titlesTotalWidth = titleRects.reduce((prev: number, curr: RectItem) => prev + curr?.width, 0);
if (titlesTotalWidth > navRectRef.value?.width) {
canShowLabel.value = true;
} else {
canShowLabel.value = false;
Expand All @@ -266,14 +261,14 @@ export default create({
const DEFAULT_PADDING = 11;
const top = titleRects
.slice(0, currentIndex.value)
.reduce((prev: number, curr: RectItem) => prev + curr.height + 0, DEFAULT_PADDING);
to = top - (navRectRef.value.height - titleRect.height) / 2;
.reduce((prev: number, curr: RectItem) => prev + curr?.height + 0, DEFAULT_PADDING);
to = top - (navRectRef.value?.height - titleRect?.height) / 2;
} else {
const DEFAULT_PADDING = 31;
const left = titleRects
.slice(0, currentIndex.value)
.reduce((prev: number, curr: RectItem) => prev + curr.width + 20, DEFAULT_PADDING);
to = left - (navRectRef.value.width - titleRect.width) / 2;
.reduce((prev: number, curr: RectItem) => prev + curr?.width + 20, DEFAULT_PADDING);
to = left - (navRectRef.value?.width - titleRect?.width) / 2;
}

nextTick(() => {
Expand Down Expand Up @@ -399,7 +394,6 @@ export default create({
}
return { marginLeft: px, marginRight: px };
});
const refRandomId = Math.random().toString(36).slice(-8);
return {
titles,
tabsContentRef,
Expand Down