fix(action-sheet): modify mobile problem #2692
Conversation
WalkthroughThis pull request introduces modifications to the action sheet component across multiple files. The changes include adding a new Changes
Suggested labels
Suggested reviewers
Possibly related PRs
Poem
Tip CodeRabbit's docstrings feature is now available as part of our Early Access Program! Simply use the command 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 (
|
|
[e2e-test-warn] The title of the Pull request should look like "fix(vue-renderless): [action-menu, alert] fix xxx bug". Please make sure you've read our contributing guide |
![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
🧹 Nitpick comments (3)
examples/sites/demos/apis/actionsheet.js (1)
40-50: Naming “content-position” may be confusing.The new prop toggles action slots rather than positioning content. Consider a more direct name like
show-actionorenable-action-slotfor clarity.examples/sites/demos/mobile/app/actionsheet/slot-action.vue (1)
15-21: Use destructuring to make slot implementation clearer.Currently, you reference
{{ data.item.label }}. Consider destructuring for readability, e.g.<template #item="{ item }">{{ item.label }}</template>.packages/theme-mobile/src/action-sheet/index.less (1)
44-44: Repeated backface-visibility property.Declaring
backface-visibilitytwice in the same rule block is redundant. Removing one instance helps keep styles concise.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
examples/sites/demos/apis/actionsheet.js(2 hunks)examples/sites/demos/mobile/app/actionsheet/clickfn.vue(0 hunks)examples/sites/demos/mobile/app/actionsheet/ellipsis.vue(0 hunks)examples/sites/demos/mobile/app/actionsheet/slot-action.vue(1 hunks)examples/sites/demos/mobile/app/actionsheet/slot-item.vue(0 hunks)examples/sites/demos/mobile/app/actionsheet/webdoc/actionsheet.js(2 hunks)packages/theme-mobile/src/action-sheet/index.less(3 hunks)
💤 Files with no reviewable changes (3)
- examples/sites/demos/mobile/app/actionsheet/slot-item.vue
- examples/sites/demos/mobile/app/actionsheet/clickfn.vue
- examples/sites/demos/mobile/app/actionsheet/ellipsis.vue
🔇 Additional comments (6)
examples/sites/demos/mobile/app/actionsheet/webdoc/actionsheet.js (2)
32-32: Change to descriptive naming is good.
Renaming '插槽' to '数据插槽' in zh-CN clarifies the slot's purpose for Chinese audiences. This is a positive update for maintainability.
44-44: Clearer naming for the action slot.
Changing '插槽' to 'action插槽' aligns the name with the slot's functionality. Good update for localization clarity.
examples/sites/demos/apis/actionsheet.js (2)
84-84: Slot description update is appropriate.
Renaming the slot description to 'action插槽' gives clarity about intent in zh-CN. This improvement benefits overall documentation.
90-99: New “item” slot is a nice customization hook.
Introducing the item slot adds flexibility for customizing the list items, making the component more extensible.
packages/theme-mobile/src/action-sheet/index.less (2)
22-23: Verify whether a full-height container is intended.
Changing the container to position: relative and height: 100% might affect layouts on different devices. Ensure the rest of the layout is tested for regressions.
106-106: Absolute positioning may cause z-index stacking issues.
Setting .&__action to position: absolute can cause stacking or overlap problems if not handled carefully. Ensure consistency with other elements.
PR
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
New Features
content-positionin the action sheet component for improved control over display.itemfor custom rendering of menu items in the action sheet.Bug Fixes
Style
Documentation