feat: ✨ grid-item添加hover-class - #994
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough此次变更主要为 grid 组件引入点击反馈和按下样式。文档更新了 Changes
Sequence Diagram(s)sequenceDiagram
participant User as 用户
participant Grid as <wd-grid>
participant Item as <wd-grid-item>
User->>Item: 悬停/点击网格项
Item->>Grid: 获取 clickable 及 hover-class 配置
Item-->>User: 显示或取消 hover 样式反馈
Assessment against linked issues
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (3)
🪧 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 (
|
Walkthrough此PR为 Changes
|
![petercat-assistant[bot]](https://avatars.githubusercontent.com/in/875736?s=60&v=4){kind=small}
✅ 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: 1
🧹 Nitpick comments (1)
docs/component/grid.md (1)
224-233: 文档更新：新增 hover-class 属性的说明文档在 Grid Attributes 表中新增了
hover-class属性，用于指定 grid-item 按下时应用的样式类，并且默认值设置为wd-grid-item__content--hover。此处描述清晰明确，但建议开发者检查组件内部关于 hoverClass 计算属性的实现，确保文档描述与实际行为保持一致。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
docs/component/grid.md(3 hunks)src/pages/grid/Index.vue(1 hunks)src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss(1 hunks)src/uni_modules/wot-design-uni/components/wd-grid-item/index.scss(2 hunks)src/uni_modules/wot-design-uni/components/wd-grid-item/wd-grid-item.vue(2 hunks)src/uni_modules/wot-design-uni/components/wd-grid/types.ts(2 hunks)
🔇 Additional comments (7)
src/pages/grid/Index.vue (1)
7-7: 添加了clickable属性，启用点击反馈效果在基本用法示例中添加了
clickable属性，这样用户可以看到网格项的点击反馈效果。这与PR的目标"grid-item添加hover-class"相符。src/uni_modules/wot-design-uni/components/wd-grid-item/index.scss (2)
27-29: 暗黑主题下的悬停效果实现为暗黑主题中的网格项添加了悬停效果，使用了
$-grid-item-hover-bg-dark变量来定义悬停时的背景色。使用!important确保样式优先级。
137-139: 默认主题下的悬停效果实现为默认主题中的网格项添加了悬停效果，使用了
$-grid-item-hover-bg变量来定义悬停时的背景色。使用!important确保样式优先级。src/uni_modules/wot-design-uni/components/wd-grid-item/wd-grid-item.vue (2)
6-6: 添加hover-class属性绑定在网格项内容元素上添加了
hover-class属性绑定，与计算属性hoverClass关联，实现了点击反馈效果。
161-166: 实现hoverClass计算属性添加计算属性
hoverClass，用于根据父组件的clickable状态及自定义设置决定hover效果。如果不可点击，则返回'none'禁用hover效果，保证了组件行为的一致性。src/uni_modules/wot-design-uni/components/wd-grid/types.ts (2)
21-21: 在GridProvide接口中添加hoverClass属性在
GridProvide接口的props对象中添加了hoverClass可选属性，使网格项能够获取父组件定义的自定义悬停类名。
52-56: 添加hoverClass属性定义和注释为
gridProps对象添加了hoverClass属性及其注释文档，描述了该属性用于自定义内容区域的hover-class。同时优化了gutter属性的格式，保持代码风格一致性。
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
2 participants
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
close #985
close #883
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
hover-class属性，允许用户自定义网格项的悬停样式。文档
样式