fix(input): [input] fix textarea word wrap style #2899
Conversation
WalkthroughThis pull request introduces a new Vue component ( Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant C as display-only-popup-more Component
participant T as TinyInput
U->>C: Views read-only text
alt Text exceeds visible area
U->>C: Clicks "Show More" button
C->>T: Triggers popup display
T-->>U: Shows full, preformatted text in popup
else Text within limits
U-->>C: Reads text normally
end
Possibly related PRs
Suggested reviewers
Poem
✨ Finishing Touches
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 (
|
Walkthrough此PR修复了textarea在只读模式下的文本换行问题，确保文本内容在超过一定行数时自动隐藏，并提供“显示更多”按钮以查看完整内容。 Changes
|
![petercat-assistant[bot]](https://avatars.githubusercontent.com/in/875736?s=60&v=4){kind=small}
WalkthroughThis PR fixes text line breaking issues in read-only mode, ensuring that text content is automatically hidden when more than a certain number of lines is available, and provides a "Show More" button to view the full content. Changes
|
![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 (2)
examples/sites/demos/mobile-first/app/input/display-only-popup-more.vue (2)
16-17: Consider internationalizing the demo text.The hardcoded Chinese text in the demo should be internationalized to support multiple languages.
- input: - '表单文本域开启只读模式，\n文本内容超过 5 行自动隐藏。\n表单文本域开启只读模式，\n文本内容超过 5 行自动隐藏。\n表单文本域开启只读模式，\n文本内容超过 5 行自动隐藏。\n表单文本域开启只读模式，\n文本内容超过 5 行自动隐藏。\n表单文本域开启只读模式，\n文本内容超过 5 行自动隐藏' + input: this.$t('demo.input.displayOnlyPopupMore.text')
24-26: Consider using responsive width.The fixed width of 260px might not be optimal for all screen sizes. Consider using relative units or media queries for better responsiveness.
-.demo-input .tiny-textarea { - width: 260px; -} +.demo-input .tiny-textarea { + width: 100%; + max-width: 260px; +}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
examples/sites/demos/mobile-first/app/input/display-only-popup-more.vue(1 hunks)examples/sites/demos/mobile-first/app/input/webdoc/input.js(1 hunks)packages/vue/src/input/src/mobile-first.vue(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- packages/vue/src/input/src/mobile-first.vue
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: PR E2E Test (pnpm test:e2e3)
🔇 Additional comments (1)
examples/sites/demos/mobile-first/app/input/webdoc/input.js (1)
512-525: LGTM! Well-documented demo entry.The new demo entry is well-structured with clear descriptions in both Chinese and English, following the established pattern of other demos.
PR
多端模板，textarea只读态设置文本换行
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
Refactor