feat(tabbar): add prop before-switch #3060
Conversation
Walkthrough这次更新主要涉及为Vue插件添加新的ESLint规则，以及在多个Vue组件和文档中引入新的 Changes
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## v4 #3060 +/- ##
==========================================
- Coverage 83.99% 83.98% -0.02%
==========================================
Files 226 226
Lines 22939 22941 +2
Branches 2476 2482 +6
==========================================
- Hits 19268 19267 -1
- Misses 3653 3656 +3
Partials 18 18 ☔ View full report in Codecov by Sentry. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Out of diff range and nitpick comments (4)
src/packages/__VUE/tabbar/doc.taro.md (1)
Line range hint
3-3: 标题级别应逐级递增。- ### 介绍 + ## 介绍src/packages/__VUE/tabbar/doc.md (1)
Line range hint
3-3: 标题级别应逐级递增。- ### 介绍 + ## 介绍src/packages/__VUE/tabbar/doc.en-US.md (2)
Line range hint
3-3: 标题级别应逐级递增。- ### Intro + ## Intro
Line range hint
38-40: 建议在句子中添加连字符和逗号以提高清晰度和正确性。- After setting the dot property, a small red dot appears in the upper right corner of the icon; When the value property is set, the corresponding logo is displayed in the upper right corner of the icon. The bardge logo component is used internally and its properties can be applied directly to the TabbarItem props. + After setting the dot property, a small red dot appears in the upper-right corner of the icon; When the value property is set, the corresponding logo is displayed in the upper-right corner of the icon. The bardge logo component is used internally, and its properties can be applied directly to the TabbarItem props.
Review Details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (1)
src/packages/__VUE/tabbar/__tests__/__snapshots__/index.spec.tsx.snapis excluded by!**/*.snap
Files selected for processing (13)
- packages/nutui-eslint-config/index.js (1 hunks)
- packages/nutui-taro-demo/src/nav/pages/tabbar/before-switch.vue (1 hunks)
- packages/nutui-taro-demo/src/nav/pages/tabbar/index.vue (4 hunks)
- src/packages/__VUE/tabbar/tests/index.spec.tsx (11 hunks)
- src/packages/__VUE/tabbar/demo/before-switch.vue (1 hunks)
- src/packages/__VUE/tabbar/demo/index.vue (4 hunks)
- src/packages/__VUE/tabbar/doc.en-US.md (3 hunks)
- src/packages/__VUE/tabbar/doc.md (3 hunks)
- src/packages/__VUE/tabbar/doc.taro.md (3 hunks)
- src/packages/__VUE/tabbar/tabbar.taro.vue (5 hunks)
- src/packages/__VUE/tabbar/tabbar.vue (3 hunks)
- src/packages/__VUE/tabbaritem/tabbar-item.taro.vue (3 hunks)
- src/packages/__VUE/tabbaritem/tabbar-item.vue (3 hunks)
Additional Context Used
GitHub Check Runs (1)
CodeFactor success (1)
src/packages/__VUE/tabbar/tests/index.spec.tsx: [warning] 196-196: src/packages/__VUE/tabbar/tests/index.spec.tsx#L196
Unexpected any. Specify a different type. (@typescript-eslint/no-explicit-any)
Additional comments not posted (30)
src/packages/__VUE/tabbar/demo/before-switch.vue (2)
1-29: 模板部分看起来很好，遵循了最佳实践。
31-41: 脚本设置部分看起来很好，beforeSwitch函数实现简单且正确。packages/nutui-taro-demo/src/nav/pages/tabbar/before-switch.vue (2)
1-29: 模板部分看起来很好，遵循了最佳实践。
31-41: 脚本设置部分看起来很好，beforeSwitch函数实现简单且正确。src/packages/__VUE/tabbar/demo/index.vue (2)
Line range hint
1-26: 模板部分看起来很好，遵循了最佳实践。
Line range hint
42-64: 脚本设置部分看起来很好，遵循了最佳实践。packages/nutui-taro-demo/src/nav/pages/tabbar/index.vue (2)
Line range hint
1-26: 模板部分看起来很好，遵循了最佳实践。
Line range hint
42-64: 脚本设置部分看起来很好，遵循了最佳实践。packages/nutui-eslint-config/index.js (1)
20-22: 新规则添加正确，符合最佳实践。src/packages/__VUE/tabbar/tabbar.vue (2)
25-25:beforeSwitch属性添加正确，符合最佳实践。Also applies to: 35-35
55-58:changeIndex函数修改正确，符合最佳实践。src/packages/__VUE/tabbar/tabbar.taro.vue (2)
28-28:beforeSwitch属性添加正确，符合最佳实践。Also applies to: 38-38
50-53:changeIndex函数修改正确，符合最佳实践。src/packages/__VUE/tabbaritem/tabbar-item.vue (1)
62-80:change函数修改正确，符合最佳实践。src/packages/__VUE/tabbar/doc.taro.md (2)
52-55: 关于before-switch属性的文档描述正确。
Line range hint
80-80: 请确保链接片段有效。Also applies to: 111-111
src/packages/__VUE/tabbar/doc.md (2)
52-55: 关于before-switch属性的文档描述正确。
Line range hint
80-80: 请确保链接片段有效。Also applies to: 113-113
src/packages/__VUE/tabbar/doc.en-US.md (2)
52-55: 关于before-switch属性的文档描述正确。
Line range hint
113-113: 请确保链接片段有效。src/packages/__VUE/tabbar/__tests__/index.spec.tsx (10)
13-13: 测试看起来不错，验证了默认情况下 Tabbar 的渲染。
29-29: 测试看起来不错，验证了使用 img 属性时自定义图片的渲染。
66-66: 测试看起来不错，验证了使用 prop 时自定义颜色和徽章的渲染。
84-84: 测试看起来不错，验证了使用 bottom 属性时固定元素的渲染。
93-93: 测试看起来不错，验证了通过点击匹配活动的 Tabbar。
116-116: 测试看起来不错，验证了点击时 tabSwitch 事件的触发。
133-133: 测试看起来不错，验证了使用 placeholder 和 bottom 属性时占位符元素的渲染。
145-145: 测试看起来不错，验证了存在路由器并使用 to 属性时的重定向。
161-161: 测试看起来不错，验证了在没有路由器存在并使用 to 属性时调用 location.replace。
179-179: 测试看起来不错，验证了使用 href 属性时设置 window.location.href。
| test('Tabbar: props.beforeSwitch', async () => { | ||
| const val = ref(0) | ||
| const beforeSwitch = (_: any, index: string | number) => { | ||
| return Number(index) % 2 === 0 | ||
| } | ||
| const wrapper = mount(() => { | ||
| return ( | ||
| <Tabbar v-model={val.value} beforeSwitch={beforeSwitch}> | ||
| <TabbarItem tab-title="首页" icon={h(Home)}></TabbarItem> | ||
| <TabbarItem tab-title="分类" icon={h(Category)}></TabbarItem> | ||
| <TabbarItem tab-title="发现" icon={h(Find)}></TabbarItem> | ||
| </Tabbar> | ||
| ) | ||
| }) | ||
| const items = wrapper.findAll('.nut-tabbar-item') | ||
| expect(items.length).toBe(3) | ||
| items[2].trigger('click') | ||
| await nextTick() | ||
| expect(val.value).toBe(2) | ||
|
|
||
| items[1].trigger('click') | ||
| await nextTick() | ||
| expect(val.value).toBe(2) | ||
| }) |
There was a problem hiding this comment.
避免使用 any 类型，建议指定一个更具体的类型。
- const beforeSwitch = (_: any, index: string | number) => {
+ const beforeSwitch = (_: unknown, index: string | number) => {Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| test('Tabbar: props.beforeSwitch', async () => { | |
| const val = ref(0) | |
| const beforeSwitch = (_: any, index: string | number) => { | |
| return Number(index) % 2 === 0 | |
| } | |
| const wrapper = mount(() => { | |
| return ( | |
| <Tabbar v-model={val.value} beforeSwitch={beforeSwitch}> | |
| <TabbarItem tab-title="首页" icon={h(Home)}></TabbarItem> | |
| <TabbarItem tab-title="分类" icon={h(Category)}></TabbarItem> | |
| <TabbarItem tab-title="发现" icon={h(Find)}></TabbarItem> | |
| </Tabbar> | |
| ) | |
| }) | |
| const items = wrapper.findAll('.nut-tabbar-item') | |
| expect(items.length).toBe(3) | |
| items[2].trigger('click') | |
| await nextTick() | |
| expect(val.value).toBe(2) | |
| items[1].trigger('click') | |
| await nextTick() | |
| expect(val.value).toBe(2) | |
| }) | |
| test('Tabbar: props.beforeSwitch', async () => { | |
| const val = ref(0) | |
| const beforeSwitch = (_: unknown, index: string | number) => { | |
| return Number(index) % 2 === 0 | |
| } | |
| const wrapper = mount(() => { | |
| return ( | |
| <Tabbar v-model={val.value} beforeSwitch={beforeSwitch}> | |
| <TabbarItem tab-title="首页" icon={h(Home)}></TabbarItem> | |
| <TabbarItem tab-title="分类" icon={h(Category)}></TabbarItem> | |
| <TabbarItem tab-title="发现" icon={h(Find)}></TabbarItem> | |
| </Tabbar> | |
| ) | |
| }) | |
| const items = wrapper.findAll('.nut-tabbar-item') | |
| expect(items.length).toBe(3) | |
| items[2].trigger('click') | |
| await nextTick() | |
| expect(val.value).toBe(2) | |
| items[1].trigger('click') | |
| await nextTick() | |
| expect(val.value).toBe(2) | |
| }) |
| const change = async () => { | ||
| try { | ||
| const key = props.name ?? index.value | ||
| await parent.changeIndex(index.value, key) | ||
|
|
||
| if (parent.children[index.value]?.href) { | ||
| window.location.href = parent.children[index.value].href | ||
| return | ||
| } | ||
| if (parent.children[index.value]?.href) { | ||
| window.location.href = parent.children[index.value].href | ||
| return | ||
| } | ||
|
|
||
| if (parent.children[index.value]?.to) { | ||
| const to = parent.children[index.value].to | ||
| if (to && router) { | ||
| router.push(to) | ||
| } else { | ||
| location.replace(to) | ||
| if (parent.children[index.value]?.to) { | ||
| const to = parent.children[index.value].to | ||
| if (to && router) { | ||
| router.push(to) | ||
| } else { | ||
| location.replace(to) | ||
| } | ||
| } | ||
| } | ||
| } catch (err) { } |
There was a problem hiding this comment.
建议在错误处理块中记录错误信息，以便于调试和排查问题。
- } catch (err) { }
+ } catch (err) {
+ console.error('Error in change function:', err);
+ }Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| const change = async () => { | |
| try { | |
| const key = props.name ?? index.value | |
| await parent.changeIndex(index.value, key) | |
| if (parent.children[index.value]?.href) { | |
| window.location.href = parent.children[index.value].href | |
| return | |
| } | |
| if (parent.children[index.value]?.href) { | |
| window.location.href = parent.children[index.value].href | |
| return | |
| } | |
| if (parent.children[index.value]?.to) { | |
| const to = parent.children[index.value].to | |
| if (to && router) { | |
| router.push(to) | |
| } else { | |
| location.replace(to) | |
| if (parent.children[index.value]?.to) { | |
| const to = parent.children[index.value].to | |
| if (to && router) { | |
| router.push(to) | |
| } else { | |
| location.replace(to) | |
| } | |
| } | |
| } | |
| } catch (err) { } | |
| const change = async () => { | |
| try { | |
| const key = props.name ?? index.value | |
| await parent.changeIndex(index.value, key) | |
| if (parent.children[index.value]?.href) { | |
| window.location.href = parent.children[index.value].href | |
| return | |
| } | |
| if (parent.children[index.value]?.to) { | |
| const to = parent.children[index.value].to | |
| if (to && router) { | |
| router.push(to) | |
| } else { | |
| location.replace(to) | |
| } | |
| } | |
| } catch (err) { | |
| console.error('Error in change function:', err); | |
| } |
这个 PR 做了什么? (简要描述所做更改)
这个 PR 是什么类型? (至少选择一个)
这个 PR 涉及以下平台:
这个 PR 是否已自测:
Summary by CodeRabbit
新功能
文档
before-switch回调函数的说明。v-model参数类型，从number改为string \| number。测试
beforeSwitch功能的测试用例。重构