feat: 为tabs组件添加showScrollbar属性 #643
Conversation
tabs组件添加showScrollbar属性控制标签可滑动时是否显示滚动条
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough此次变更更新了 Changes
Possibly related PRs
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
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 using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for wot-design-uni ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (4)
src/uni_modules/wot-design-uni/components/wd-tabs/types.ts (1)
62-67: 新属性showScrollbar添加正确新添加的
showScrollbar属性很好地解决了 PR 中提到的问题。使用makeBooleanProp(false)来定义属性是正确的，与文件中其他布尔属性的定义方式一致。默认值设置为false符合需求，默认情况下不显示滚动条。建议稍微修改一下注释，使其更加明确：
/** * 控制是否显示滚动条 * * @default false */ showScrollbar: makeBooleanProp(false)这样可以更清楚地表明这个属性的作用和默认值。
docs/component/tabs.md (2)
150-151: 需要更新版本信息并添加使用示例
请将
$LOWEST_VERSION$替换为实际的最低支持版本号。建议在文档中添加一个使用
showScrollbar属性的示例，以帮助用户更好地理解如何使用这个新特性。例如：<wd-tabs v-model="tab" :show-scrollbar="false"> <!-- 标签内容 --> </wd-tabs>这将使文档更加完整和用户友好。
Line range hint
1-3: 建议在文档开头介绍新特性为了突出新添加的
showScrollbar属性，建议在文档的介绍部分或者作为一个新的章节来说明这个特性。例如，可以在基本用法部分之后添加如下内容：## 控制滚动条显示 使用 `showScrollbar` 属性来控制当标签可以滚动时是否显示滚动条。默认情况下，滚动条是不显示的。 ```html <wd-tabs v-model="tab" :show-scrollbar="true"> <!-- 标签内容 --> </wd-tabs>这个新特性允许用户根据需要显示或隐藏滚动条，提高了组件的灵活性和可定制性。
这样可以让用户更容易注意到并理解这个新功能。 </blockquote></details> <details> <summary>src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue (1)</summary><blockquote> `83-83`: **新属性 `showScrollbar` 的实现看起来不错！** `:showScrollbar="showScrollbar"` 的添加允许用户控制滚动条的可见性，这与 PR 的目标一致。实现简单明了，很好地解决了问题。 建议： 1. 请确保在组件的 props 中定义了 `showScrollbar` 属性。如果还没有定义，请添加它并指定适当的类型和默认值。 2. 更新组件的文档，说明这个新属性的用途和默认值。 这将有助于保持代码的完整性和提高可维护性。 </blockquote></details> </blockquote></details> <details> <summary>📜 Review details</summary> **Configuration used: CodeRabbit UI** **Review profile: CHILL** <details> <summary>📥 Commits</summary> Files that changed from the base of the PR and between 5092c5a6548fe7222e0d6e2614020f15ce95c5df and 8d33269958538e5e1ae3b44c51271aaf694b979b. </details> <details> <summary>📒 Files selected for processing (3)</summary> * docs/component/tabs.md (1 hunks) * src/uni_modules/wot-design-uni/components/wd-tabs/types.ts (1 hunks) * src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue (1 hunks) </details> <details> <summary>🔇 Additional comments (3)</summary><blockquote> <details> <summary>src/uni_modules/wot-design-uni/components/wd-tabs/types.ts (1)</summary><blockquote> `61-61`: **代码风格改进：添加尾随逗号** 添加尾随逗号是一个好的做法。它使得添加新属性更容易，并且在版本控制中产生更清晰的差异。这个改变有助于提高代码的可维护性。 </blockquote></details> <details> <summary>docs/component/tabs.md (2)</summary><blockquote> `150-151`: **新属性 `showScrollbar` 的描述准确且有用** `showScrollbar` 属性的描述清晰地解释了其功能和默认值。这与 PR 的目标一致，允许用户控制滚动条的可见性。 --- Line range hint `1-151`: **总体评价：文档更新符合预期，有小改进空间** 本次更新成功添加了 `showScrollbar` 属性的说明，这与 PR 的目标一致。文档的修改准确反映了新功能的添加。为了进一步提高文档质量，建议： 1. 替换 `$LOWEST_VERSION$` 为实际的版本号。 2. 在文档前面部分添加关于 `showScrollbar` 属性的介绍和使用示例。 3. 考虑在现有的示例中展示 `showScrollbar` 的使用方法。 这些小的改进将使文档更加全面和用户友好，有助于开发者更好地理解和使用这个新特性。 </blockquote></details> </blockquote></details> </details> <!-- This is an auto-generated comment by CodeRabbit for review status -->
|
showScrollbar在 |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (4)
src/uni_modules/wot-design-uni/components/wd-tabs/types.ts (1)
62-67: 考虑跨平台兼容性和替代方案根据 PR 的评论，
showScrollbar属性在某些平台上可能不受支持或需要额外配置。考虑以下建议：
添加注释说明兼容性问题：
/** * 控制是否出现滚动条 * 注意：此属性在某些平台（如 app-vue、钉钉小程序、支付宝小程序、h5）可能不生效。 * 在微信小程序中，需要配合 `enhanced` 设置使用。 * * 默认为 true */ showScrollbar: makeBooleanProp(true)考虑使用 CSS 方法控制滚动条可见性，这可能提供更好的跨平台兼容性。您可以添加一个新的 prop 来切换 CSS 类：
/** * 使用 CSS 控制滚动条可见性（推荐用于跨平台兼容） * * 默认为 false */ hideScrollbarWithCss: makeBooleanProp(false)在组件的实现中，根据不同平台采取相应的策略来处理滚动条可见性。
请考虑这些建议以提高组件的跨平台兼容性和使用灵活性。
src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue (3)
5-9: 代码结构优化和新功能添加这些更改改进了代码的可读性，并成功实现了
showScrollbar属性的功能。通过条件类绑定，现在可以动态控制滚动条的可见性，这与 PR 的目标相符。建议：为了进一步提高可读性，考虑使用模板字符串来组织类名。例如：
:class="` wd-tabs ${customClass} ${slidableNum < items.length ? 'is-slide' : ''} ${mapNum < items.length && mapNum !== 0 ? 'is-map' : ''} ${showScrollbar ? '' : 'hide-scrollbar'} `"这种方式可以使类名的结构更清晰，特别是在有多个条件类的情况下。
83-88: 非粘性模板的一致性更新这些更改确保了非粘性模板与粘性模板保持一致，同时实现了
showScrollbar属性的功能。这种一致性有助于维护代码的可读性和可维护性。建议：与之前的建议一致，考虑使用模板字符串来组织类名，以进一步提高可读性：
:class="` wd-tabs ${customClass} ${slidableNum < items.length ? 'is-slide' : ''} ${mapNum < items.length && mapNum !== 0 ? 'is-map' : ''} ${showScrollbar ? '' : 'hide-scrollbar'} `"这种方式可以使类名的结构更清晰，特别是在有多个条件类的情况下。
Line range hint
1-488: 缺少属性定义和文档说明在实现
showScrollbar功能时，发现了以下问题：
showScrollbar属性没有在组件的 props 中定义。这可能导致意外的行为，因为 Vue 不会正确地识别和响应这个属性的变化。缺少关于
showScrollbar功能的文档或注释说明。这可能会使其他开发者难以理解和正确使用这个新功能。建议：
- 在 props 中添加
showScrollbar的定义，例如：showScrollbar: { type: Boolean, default: true }
- 在组件顶部添加注释，解释
showScrollbar属性的用途和默认值：<!-- @property {Boolean} showScrollbar - 控制滚动条的可见性，默认为 true -->
- 考虑在 README 或组件文档中添加关于这个新属性的使用说明和示例。
实施这些改进将有助于提高代码的健壮性和可维护性，同时为其他开发者提供更好的使用指导。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (3)
- src/uni_modules/wot-design-uni/components/wd-tabs/index.scss (1 hunks)
- src/uni_modules/wot-design-uni/components/wd-tabs/types.ts (1 hunks)
- src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue (2 hunks)
🧰 Additional context used
🔇 Additional comments (4)
src/uni_modules/wot-design-uni/components/wd-tabs/types.ts (1)
61-61: 代码风格改进：添加尾随逗号添加尾随逗号是一个好的做法。它使得在添加新属性时的版本控制差异更清晰，并与对象中其他属性的样式保持一致。
src/uni_modules/wot-design-uni/components/wd-tabs/index.scss (2)
Line range hint
1-287: 总体评估：新增样式与现有代码的集成新增的隐藏滚动条样式是对现有
wd-tabs组件的一个小但重要的补充。然而，考虑到文件的整体结构和现有的样式定义，我们需要注意以下几点：
- 集成性：新增的样式应该与现有的样式结构保持一致，可能需要考虑将其整合到适当的嵌套结构中。
- 响应式设计：文件中已有针对不同屏幕尺寸的样式调整（如@media查询），可能需要考虑新增样式在不同设备上的表现。
- 主题兼容性：文件开头定义了暗黑主题，新增的样式可能需要在暗黑主题下进行相应的调整。
- 命名一致性：确保新增的
hide-scrollbar类名与组件的整体命名规范保持一致。建议：
- 考虑将新增的样式整合到现有的嵌套结构中，可能的位置是在
@include b(tabs)块内。- 检查新样式在暗黑主题下的表现，必要时添加相应的样式规则。
- 确保新增的功能在组件文档中得到充分说明，包括使用方法和潜在的平台限制。
为了确保新增样式与现有代码的一致性，我们可以运行以下脚本：
#!/bin/bash # 检查样式结构和命名约定 # 查找所有使用 @include b(tabs) 的地方 rg --type scss '@include b\(tabs\)' src/uni_modules/wot-design-uni/components/wd-tabs/ # 检查是否有其他地方使用了类似的命名约定 rg --type scss '@include [bem]' src/uni_modules/wot-design-uni/components/wd-tabs/这将帮助我们了解现有的样式结构和命名约定，从而确保新增样式的一致性。
283-287: 🛠️ Refactor suggestion新增的隐藏滚动条样式需要考虑兼容性和用户体验
这个新增的CSS规则用于隐藏webkit浏览器的滚动条，与PR的目标（添加
showScrollbar属性来控制滚动条可见性）相符。然而，我们需要考虑以下几点：
- 跨浏览器兼容性：这个规则只适用于webkit内核的浏览器，可能需要为其他浏览器添加相应的规则。
- 用户体验：完全隐藏滚动条可能会影响某些用户的浏览体验，特别是在内容较长的情况下。
- 辅助功能：隐藏滚动条可能会影响使用辅助技术的用户。
建议：
- 考虑添加非webkit浏览器的兼容性样式。
- 在文档中清楚地说明这个功能的局限性。
- 提供一个优雅降级的方案，在不支持隐藏滚动条的平台上提供替代的视觉反馈。
考虑添加以下代码来提高跨浏览器兼容性：
.hide-scrollbar { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ }为了验证这个变更对不同平台的影响，我们可以运行以下脚本：
这将帮助我们了解是否需要为特定平台添加额外的样式规则。
src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue (1)
Line range hint
1-488: 平台兼容性问题根据 PR 评论中提到的信息，
showScrollbar属性在某些平台上可能不起作用，包括 app-vue、钉钉小程序、支付宝小程序和 h5 平台。当前的实现没有考虑到这些平台特定的兼容性问题。建议：
- 考虑使用 CSS 来控制滚动条的可见性，这可能会提供更好的跨平台兼容性。例如：
.hide-scrollbar { scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE and Edge */ &::-webkit-scrollbar { display: none; /* Chrome, Safari and Opera */ } }
- 对于微信小程序，可能需要额外的逻辑来处理
enhanced设置。考虑添加一个条件检查：<scroll-view :scroll-x="slidableNum < items.length" :enhanced="isWechatMiniProgram && showScrollbar" :show-scrollbar="isWechatMiniProgram ? showScrollbar : true" > <!-- ... --> </scroll-view>
在组件文档中清楚地说明各平台的兼容性情况，以及任何已知的限制或特殊要求。
考虑添加一个平台检测的辅助函数，以便更容易地处理平台特定的行为：
function getPlatform() { // 实现平台检测逻辑 }通过实施这些建议，可以提高组件在不同平台上的兼容性和可用性。
| /** | ||
| * 控制是否出现滚动条 | ||
| * | ||
| * 默认为 false | ||
| */ | ||
| showScrollbar: makeBooleanProp(true) |
There was a problem hiding this comment.
修复 showScrollbar 属性的注释和默认值不一致
新添加的 showScrollbar 属性很好地实现了 PR 的目标。然而，注释中说明默认值为 false，但实际实现中默认值为 true。这种不一致可能会导致使用者混淆。
建议修改如下：
-
如果默认值应该是
true：/** * 控制是否出现滚动条 * * 默认为 true */ showScrollbar: makeBooleanProp(true)
-
如果默认值应该是
false：/** * 控制是否出现滚动条 * * 默认为 false */ showScrollbar: makeBooleanProp(false)
请确认正确的默认值，并相应地更新代码或注释。
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
💡 需求背景和解决方案
要解决的问题：wd-tabs在标签可以滑动时会出现滚动条需要手动样式覆盖比较麻烦
添加通过(showScrollbar)属性控制滚动条是否可以显示
☑️ 请求合并前的自查清单
Summary by CodeRabbit
wd-tabs组件中添加showScrollbar属性，允许用户通过配置来展示是否展示滚动条wd-tabs组件的文档，说明属性的作用以及默认值Summary by CodeRabbit
wd-tabs组件的文档，增加了新属性和功能。v-model可以接受number（选中的标签索引）和string（标签名称）。sticky属性以支持粘性布局配置。wd-tab上设置disabled属性以禁用特定标签。swipeable属性以支持手势切换标签。animated属性以实现标签内容切换时的过渡动画。Tabs属性表中新增showScrollbar属性，控制可滚动标签的滚动条可见性。