docs: optimize features of guide/image/link and so on #3147
Conversation
WalkthroughThis pull request updates multiple component documentation files under Changes
Possibly related PRs
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 ESLint
examples/sites/demos/pc/app/guide/webdoc/guide.jsOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-vue". (The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. examples/sites/demos/pc/app/icon/webdoc/icon.jsOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-vue". (The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. examples/sites/demos/pc/app/image/webdoc/image.jsOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-vue". (The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.
Tip ⚡🧪 Multi-step agentic review comment chat (experimental)
✨ Finishing Touches
🪧 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 |
Walkthrough此PR优化了多个组件的特性列表，包括guide、image、link等。主要添加了新的特性描述和支持信息，增强了组件的功能展示。 Changes
|
| support: { | ||
| value: true | ||
| }, | ||
| description: '通过 hightBox 属性添加需要高亮的元素，支持多处高亮。', |
There was a problem hiding this comment.
Typo in property name: 'hightBox' should be 'highlightBox'.
WalkthroughThis PR optimizes the feature list of multiple components, including guide, image, link, etc. It mainly adds new feature descriptions and support information to enhance the functional display of components. Changes
|
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
examples/sites/demos/pc/app/progress/webdoc/progress.js (1)
99-177: Comprehensive progress component features documentationThe added features array provides excellent documentation of the progress component's capabilities, with clear descriptions and references to APIs and demos.
One minor suggestion: in the feature with ID "icon" (lines 152-164), the
apisarray contains "slot-icon-status" which appears to be a slot name rather than an API. Consider using a separate property for slots or clarifying the naming convention.examples/sites/demos/pc/app/notify/webdoc/notify.js (1)
191-347: Documentation structure looks good, but found a duplicate feature name.The features array is well-structured and provides excellent documentation for the Notify component, mapping each feature to corresponding demos and APIs. However, there's a duplicate feature name that should be fixed.
There are two features named "类型图标" (Type Icon):
- Line 259: id: 'show-icon' for controlling icon visibility
- Line 285: id: 'status-icon' for customizing the icon
Consider renaming one of them for better clarity, perhaps:
- name: '类型图标', + name: '自定义类型图标',
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (18)
examples/sites/demos/pc/app/guide/webdoc/guide.js(1 hunks)examples/sites/demos/pc/app/icon/webdoc/icon.js(2 hunks)examples/sites/demos/pc/app/image/webdoc/image.js(1 hunks)examples/sites/demos/pc/app/infinite-scroll/webdoc/infinite-scroll.js(1 hunks)examples/sites/demos/pc/app/input/webdoc/input.js(1 hunks)examples/sites/demos/pc/app/ip-address/webdoc/ip-address.js(1 hunks)examples/sites/demos/pc/app/layout/webdoc/layout.js(1 hunks)examples/sites/demos/pc/app/link/webdoc/link.js(1 hunks)examples/sites/demos/pc/app/milestone/webdoc/milestone.js(1 hunks)examples/sites/demos/pc/app/mind-map/webdoc/mind-map.js(1 hunks)examples/sites/demos/pc/app/modal/webdoc/modal.js(1 hunks)examples/sites/demos/pc/app/notify/webdoc/notify.js(1 hunks)examples/sites/demos/pc/app/numeric/webdoc/numeric.js(1 hunks)examples/sites/demos/pc/app/pager/webdoc/pager.js(1 hunks)examples/sites/demos/pc/app/pop-upload/webdoc/pop-upload.js(1 hunks)examples/sites/demos/pc/app/popover/webdoc/popover.js(1 hunks)examples/sites/demos/pc/app/progress/webdoc/progress.js(1 hunks)examples/sites/demos/pc/app/qr-code/webdoc/qr-code.js(2 hunks)
🔇 Additional comments (17)
examples/sites/demos/pc/app/numeric/webdoc/numeric.js (1)
233-402: Well-structured component features documentation added!The addition of the
featuresarray provides a comprehensive and structured documentation of all the numeric component's capabilities. Each feature is clearly defined with its support status, description, cloud compatibility, associated APIs, and demo references.This structured approach makes it easier for developers to understand the component's capabilities at a glance and find the relevant demos and API references.
examples/sites/demos/pc/app/infinite-scroll/webdoc/infinite-scroll.js (1)
35-61: Clear documentation of infinite-scroll featuresThe features array is well-structured and provides clear documentation of the infinite-scroll component's capabilities. The consistent format with id, name, support status, description, cloud compatibility, APIs, and demo references enhances the component's documentation.
Note that the
cloudvalue is set tofalsefor all features, which is consistent with the component's overallcloud: falsesetting.examples/sites/demos/pc/app/ip-address/webdoc/ip-address.js (1)
87-165: Complete documentation for IP address component featuresThe features array is well-structured and provides comprehensive documentation of the IP address component's capabilities. Each feature clearly describes its functionality, support status, cloud compatibility, and links to relevant APIs and demos.
The descriptions are concise yet informative, making it easy for developers to understand the component's capabilities.
examples/sites/demos/pc/app/input/webdoc/input.js (1)
323-441: Well-structured feature documentation enhancement!The addition of the features array provides clear, well-organized documentation of the Input component's capabilities. Each feature object follows a consistent format with id, name, support status, description, cloud compatibility, relevant APIs, and demo references.
The features accurately correspond to the existing demos and cover all major functionality of the Input component.
examples/sites/demos/pc/app/mind-map/webdoc/mind-map.js (1)
72-123: Good addition of structured features documentation!The features array effectively categorizes the Mind Map component's capabilities into three clear sections: basic usage, data processing, and events. The cloud property is consistently set to false, matching the component's global cloud setting.
The API references in each feature correctly reflect the functionality described in the demos.
examples/sites/demos/pc/app/qr-code/webdoc/qr-code.js (2)
5-5: Cloud property updated to trueThe cloud property has been changed from false to true, indicating this component is now cloud-compatible.
59-138:❓ Verification inconclusive
Missing demo references in the features array
The features array includes references to demos that don't appear to be defined in the current demos array. Specifically, 'logo', 'custom-color', 'error-level', 'download', and 'events' are referenced in the features but don't have corresponding demo objects.
Please verify that these demo identifiers exist or will be added in a separate PR. This mismatch could potentially cause issues if the application tries to display these demos.
🏁 Script executed:
#!/bin/bash # Check if the referenced demos exist in other files or in the codebase echo "Searching for QR code demo files that might contain the referenced demos..." find examples/sites/demos/pc/app/qr-code -type f -name "*.vue" | grep -E "logo|custom-color|error-level|download|events"Length of output: 283
Action Required: Verify Missing Demo References in QR Code Features Array
It appears that the feature definitions for the demos—specifically 'logo', 'custom-color', 'error-level', 'download', and 'events'—do not have corresponding demo implementations present in the repository (based on the current search results). This discrepancy might lead to issues if the application later attempts to render these demos.
- The file
examples/sites/demos/pc/app/qr-code/webdoc/qr-code.jsreferences these demo identifiers.- A shell search within the
examples/sites/demos/pc/app/qr-codedirectory for.vuefiles containing these identifiers produced no output.- Please verify that these demos either exist elsewhere in the codebase or are scheduled to be added in a separate PR. If they’re not planned for addition, consider either removing or adjusting the references to prevent potential runtime errors.
examples/sites/demos/pc/app/layout/webdoc/layout.js (1)
105-197: Well-documented features array with clear mappingsThe features array provides excellent documentation of the Layout component's capabilities. Each feature object has a consistent structure and proper references to the existing demos.
The API properties listed for each feature align well with the functionality described in the demos, making this a valuable addition to the documentation.
examples/sites/demos/pc/app/pager/webdoc/pager.js (1)
245-352: Great addition of structured features documentation!The new
featuresarray provides a clear, structured way to document the pager component's capabilities. Each feature object contains consistent properties (id, name, support, description, cloud, apis, demos) that make it easy to understand the component's functionality at a glance.The organization into distinct features (basic usage, page size, layout, etc.) with their corresponding APIs and demo references creates an excellent reference for developers.
examples/sites/demos/pc/app/image/webdoc/image.js (1)
164-255: Good structured documentation, but check cloud compatibilityThe features array is well-organized with clear descriptions of the image component's capabilities. Each feature is properly linked to its corresponding APIs and demos.
I notice that all features have
cloud: { value: false }, which aligns with the component's maincloud: falseproperty. Ensure this is intentional and accurately reflects cloud compatibility for these features.examples/sites/demos/pc/app/modal/webdoc/modal.js (1)
345-449: Well-structured features documentation with proper cloud supportThe modal component's features are clearly documented with appropriate descriptions. Each feature correctly references its corresponding APIs and demos, making it easy for developers to understand the component's capabilities.
All features have
cloud: { value: true }, which aligns with the component's maincloud: trueproperty, indicating consistent cloud support.examples/sites/demos/pc/app/icon/webdoc/icon.js (1)
2-2: Layout adjustment from 1 to 2 columnsChanged the column layout from '1' to '2', which will improve the display of icons in the documentation by arranging them in two columns instead of one.
examples/sites/demos/pc/app/popover/webdoc/popover.js (1)
203-321: Well-structured feature documentation with comprehensive coverageThe added features array provides an excellent structured overview of the popover component's capabilities. Each feature is well-defined with clear descriptions, API references, and demo mappings.
examples/sites/demos/pc/app/guide/webdoc/guide.js (1)
121-227: Clear and consistent feature documentation implementationThe features array for the guide component follows the same well-structured format as other components, making it easy to understand the component's capabilities at a glance. Each feature includes appropriate API references and demo examples.
examples/sites/demos/pc/app/milestone/webdoc/milestone.js (1)
141-254: Comprehensive feature documentation with proper cloud support indicationThe milestone component's features array correctly indicates that cloud support is not available (
cloud: false), providing accurate information to users. The structure is consistent with other components, and each feature is well-documented with relevant APIs and demos.examples/sites/demos/pc/app/pop-upload/webdoc/pop-upload.js (1)
158-266: Well-organized feature documentation with clear API referencesThe pop-upload component features are thoroughly documented with appropriate descriptions, API references, and demo mappings. The consistent structure aligns with the documentation approach used across other components.
examples/sites/demos/pc/app/link/webdoc/link.js (1)
101-179: Documentation looks good, all features are thoroughly documented.The features array provides comprehensive documentation for the Link component, with good mapping between features, APIs, and demos. All features are properly supported and cloud-enabled.
ffe1cf6 to
ae0af68
Compare
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (1)
examples/sites/demos/pc/app/icon/webdoc/icon.js (1)
66-144:⚠️ Potential issueMissing demo references in icon features
The features array contains references to demo files that don't exist in the demos array:
- 'custom-color' (line 91)
- 'animation' (line 104)
- 'rotation' (line 117)
- 'flip' (line 130)
- 'events' (line 143)
This issue was identified in a previous review but appears to still be unresolved.
Either create these missing demo files or update the references to point to existing demos:
- demos: ['custom-color'] + demos: ['basic-usage']- demos: ['animation'] + demos: ['basic-usage']- demos: ['rotation'] + demos: ['basic-usage']- demos: ['flip'] + demos: ['basic-usage']- demos: ['events'] + demos: ['basic-usage']#!/bin/bash # Check if the referenced demos exist in the codebase echo "Checking for referenced demos in the icon component..." fd -t f "custom-color.vue|animation.vue|rotation.vue|flip.vue|events.vue" examples/sites/demos/pc/app/icon/
🧹 Nitpick comments (3)
examples/sites/demos/pc/app/modal/webdoc/modal.js (1)
417-418: Property name inconsistencyThe description refers to
close-on-click-modalbut in the original documentation (lines 161-162), this functionality is referred to asmask-closable. Consider using consistent property names across documentation.- description: '通过 show-close 设置是否显示关闭按钮，close-on-click-modal 设置点击遮罩层是否关闭。', + description: '通过 show-close 设置是否显示关闭按钮，mask-closable 设置点击遮罩层是否关闭。',examples/sites/demos/pc/app/guide/webdoc/guide.js (1)
172-172: Typo in API reference: 'hightBox' should be 'highlightBox'.The API reference contains the same typo as the description.
- apis: ['hightBox'], + apis: ['highlightBox'],examples/sites/demos/pc/app/notify/webdoc/notify.js (1)
191-347: Consider renaming one of the duplicate "类型图标" feature names.Two features have identical names but different purposes:
- Line 259:
id: 'show-icon'with name "类型图标" (controls visibility)- Line 285:
id: 'status-icon'also with name "类型图标" (customizes the icon)Consider renaming one to avoid confusion, perhaps "类型图标显示" and "类型图标自定义".
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (18)
examples/sites/demos/pc/app/guide/webdoc/guide.js(1 hunks)examples/sites/demos/pc/app/icon/webdoc/icon.js(1 hunks)examples/sites/demos/pc/app/image/webdoc/image.js(1 hunks)examples/sites/demos/pc/app/infinite-scroll/webdoc/infinite-scroll.js(1 hunks)examples/sites/demos/pc/app/input/webdoc/input.js(1 hunks)examples/sites/demos/pc/app/ip-address/webdoc/ip-address.js(1 hunks)examples/sites/demos/pc/app/layout/webdoc/layout.js(1 hunks)examples/sites/demos/pc/app/link/webdoc/link.js(1 hunks)examples/sites/demos/pc/app/milestone/webdoc/milestone.js(1 hunks)examples/sites/demos/pc/app/mind-map/webdoc/mind-map.js(1 hunks)examples/sites/demos/pc/app/modal/webdoc/modal.js(1 hunks)examples/sites/demos/pc/app/notify/webdoc/notify.js(1 hunks)examples/sites/demos/pc/app/numeric/webdoc/numeric.js(1 hunks)examples/sites/demos/pc/app/pager/webdoc/pager.js(1 hunks)examples/sites/demos/pc/app/pop-upload/webdoc/pop-upload.js(1 hunks)examples/sites/demos/pc/app/popover/webdoc/popover.js(1 hunks)examples/sites/demos/pc/app/progress/webdoc/progress.js(1 hunks)examples/sites/demos/pc/app/qr-code/webdoc/qr-code.js(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
- examples/sites/demos/pc/app/numeric/webdoc/numeric.js
- examples/sites/demos/pc/app/infinite-scroll/webdoc/infinite-scroll.js
- examples/sites/demos/pc/app/progress/webdoc/progress.js
🔇 Additional comments (14)
examples/sites/demos/pc/app/ip-address/webdoc/ip-address.js (1)
87-165: Documentation structure looks goodThe addition of the features array provides well-organized documentation of IP address component capabilities. Each feature is clearly described with appropriate support status, cloud compatibility, and references to the relevant APIs and demos.
examples/sites/demos/pc/app/mind-map/webdoc/mind-map.js (1)
72-122: Feature documentation structure looks goodThe features array provides a clear documentation structure for the mind-map component, with appropriate references to demos and APIs. The feature descriptions accurately represent the component's capabilities as described in the existing demos.
examples/sites/demos/pc/app/layout/webdoc/layout.js (1)
105-196: Well-structured features documentation added.The new
featuresarray enhances the documentation by providing a structured way to describe the Layout component's capabilities. Each feature entry clearly maps to existing demos, making it easy for developers to understand available functionality.examples/sites/demos/pc/app/pager/webdoc/pager.js (1)
246-352: Well-organized pagination features documentation.The addition of the structured
featuresarray provides clear documentation of the Pager component's capabilities. Each feature is properly linked to its corresponding demo examples and API references.examples/sites/demos/pc/app/image/webdoc/image.js (1)
164-255: Comprehensive image component features documentation.The added
featuresarray provides a well-structured overview of the Image component's capabilities, with appropriate links to demos and APIs.examples/sites/demos/pc/app/qr-code/webdoc/qr-code.js (1)
59-137: Verify that all referenced demos exist for QR code features.The added
featuresarray includes references to demos that don't appear to exist in the current demos array: 'logo', 'custom-color', 'error-level', 'download', and 'events'. This could lead to broken links in the documentation.Please verify if these demos are planned to be added in a separate PR, or if the demo references should be updated to match existing demos.
examples/sites/demos/pc/app/modal/webdoc/modal.js (1)
345-449: Nice addition of structured features documentation!The new features array provides a well-organized overview of the modal component's capabilities, making it easier for developers to understand available functionality at a glance.
examples/sites/demos/pc/app/popover/webdoc/popover.js (1)
203-321: Great addition of features documentation!The new features array provides well-structured information about the popover component's capabilities, with clear descriptions and appropriate references to APIs and demos.
examples/sites/demos/pc/app/guide/webdoc/guide.js (2)
121-227: Well-structured features documentation added!The features array provides a comprehensive overview of the guide component's capabilities with clear descriptions and appropriate API references.
168-168: Typo in property name: 'hightBox' should be 'highlightBox'.Maintain consistency in property naming by using proper spelling for the highlight box property.
- description: '通过 hightBox 属性添加需要高亮的元素，支持多处高亮。', + description: '通过 highlightBox 属性添加需要高亮的元素，支持多处高亮。',examples/sites/demos/pc/app/milestone/webdoc/milestone.js (1)
141-254: Well-structured features documentation added!The new features array provides clear and comprehensive information about the milestone component's capabilities, with consistent references to APIs and demos. The cloud support status is correctly set to match the main component configuration.
examples/sites/demos/pc/app/pop-upload/webdoc/pop-upload.js (1)
158-267: Well-structured feature documentation added.The addition of the features array provides a clear, structured way to document component capabilities. Each feature is well-organized with a unique ID, descriptive name, support status, concise description, cloud compatibility, and properly linked APIs and demos.
examples/sites/demos/pc/app/notify/webdoc/notify.js (1)
191-347: Well-structured feature documentation added.The features array provides a comprehensive overview of the notification component capabilities with proper organization of IDs, names, support status, descriptions, and API references.
examples/sites/demos/pc/app/link/webdoc/link.js (1)
101-179: Well-structured feature documentation added with cloud support.The features array effectively documents the link component's capabilities with proper organization. All features correctly indicate cloud support with
value: true, which matches the globalcloud: truesetting at the top of the file.
| value: true | ||
| }, | ||
| description: '通过 size 设置输入框大小，可选值：medium、small、mini。', | ||
| cloud: { | ||
| value: true | ||
| }, | ||
| apis: ['size'], | ||
| demos: ['size'] | ||
| }, | ||
| { | ||
| id: 'disabled', | ||
| name: '禁用状态', | ||
| support: { | ||
| value: true | ||
| }, | ||
| description: '通过 disabled 设置输入框禁用状态。', | ||
| cloud: { | ||
| value: true | ||
| }, | ||
| apis: ['disabled'], | ||
| demos: ['disabled'] | ||
| }, | ||
| { | ||
| id: 'readonly', | ||
| name: '只读状态', | ||
| support: { | ||
| value: true | ||
| }, | ||
| description: '通过 readonly 设置输入框只读状态。', | ||
| cloud: { | ||
| value: true | ||
| }, | ||
| apis: ['readonly'], | ||
| demos: ['readonly'] | ||
| }, | ||
| { | ||
| id: 'clearable', | ||
| name: '可清空', | ||
| support: { | ||
| value: true | ||
| }, | ||
| description: '通过 clearable 设置是否可清空。', | ||
| cloud: { | ||
| value: true | ||
| }, | ||
| apis: ['clearable'], | ||
| demos: ['clearable'] | ||
| }, | ||
| { | ||
| id: 'password', | ||
| name: '密码框', | ||
| support: { | ||
| value: true | ||
| }, | ||
| description: '通过 type="password" 设置密码输入框，show-password 显示切换密码图标。', | ||
| cloud: { | ||
| value: true | ||
| }, | ||
| apis: ['type', 'show-password'], | ||
| demos: ['password'] | ||
| }, | ||
| { | ||
| id: 'icon', | ||
| name: '带图标', | ||
| support: { | ||
| value: true | ||
| }, | ||
| description: '通过 prefix-icon 或 suffix-icon 设置输入框前后图标。', | ||
| cloud: { | ||
| value: true | ||
| }, | ||
| apis: ['prefix-icon', 'suffix-icon'], | ||
| demos: ['icon'] | ||
| }, | ||
| { | ||
| id: 'textarea', | ||
| name: '文本域', | ||
| support: { | ||
| value: true | ||
| }, | ||
| description: '通过 type="textarea" 设置文本域，rows 设置行数，autosize 自适应内容高度。', | ||
| cloud: { | ||
| value: true | ||
| }, | ||
| apis: ['type', 'rows', 'autosize'], | ||
| demos: ['textarea'] | ||
| }, | ||
| { | ||
| id: 'events', | ||
| name: '事件', | ||
| support: { | ||
| value: true | ||
| }, | ||
| description: '支持 focus、blur、change、input、clear 等事件。', | ||
| cloud: { | ||
| value: true | ||
| }, | ||
| apis: ['focus', 'blur', 'change', 'input', 'clear'], | ||
| demos: ['events'] | ||
| } |
There was a problem hiding this comment.
Fix demo reference mismatches in features array
There are several inconsistencies between demo references in the features array and the actual demoIds:
- Line 400: References 'password' but the actual demoId is 'show-password'
- Line 426: References 'textarea' but there's no demo with this exact demoId (related demos are 'rows' and 'resize')
- Line 439: References 'events' but the actual demoId is 'event' (singular)
These mismatches could cause broken links or references in the UI.
- demos: ['password']
+ demos: ['show-password']- demos: ['textarea']
+ demos: ['rows', 'resize']- demos: ['events']
+ demos: ['event']📝 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. Thoroughly test & benchmark the code to ensure it meets the requirements.
| features: [ | |
| { | |
| id: 'basic', | |
| name: '基本用法', | |
| support: { | |
| value: true | |
| }, | |
| description: '通过 v-model 绑定输入值，placeholder 设置占位文本。', | |
| cloud: { | |
| value: true | |
| }, | |
| apis: ['v-model', 'placeholder'], | |
| demos: ['basic-usage'] | |
| }, | |
| { | |
| id: 'size', | |
| name: '尺寸', | |
| support: { | |
| value: true | |
| }, | |
| description: '通过 size 设置输入框大小，可选值：medium、small、mini。', | |
| cloud: { | |
| value: true | |
| }, | |
| apis: ['size'], | |
| demos: ['size'] | |
| }, | |
| { | |
| id: 'disabled', | |
| name: '禁用状态', | |
| support: { | |
| value: true | |
| }, | |
| description: '通过 disabled 设置输入框禁用状态。', | |
| cloud: { | |
| value: true | |
| }, | |
| apis: ['disabled'], | |
| demos: ['disabled'] | |
| }, | |
| { | |
| id: 'readonly', | |
| name: '只读状态', | |
| support: { | |
| value: true | |
| }, | |
| description: '通过 readonly 设置输入框只读状态。', | |
| cloud: { | |
| value: true | |
| }, | |
| apis: ['readonly'], | |
| demos: ['readonly'] | |
| }, | |
| { | |
| id: 'clearable', | |
| name: '可清空', | |
| support: { | |
| value: true | |
| }, | |
| description: '通过 clearable 设置是否可清空。', | |
| cloud: { | |
| value: true | |
| }, | |
| apis: ['clearable'], | |
| demos: ['clearable'] | |
| }, | |
| { | |
| id: 'password', | |
| name: '密码框', | |
| support: { | |
| value: true | |
| }, | |
| description: '通过 type="password" 设置密码输入框，show-password 显示切换密码图标。', | |
| cloud: { | |
| value: true | |
| }, | |
| apis: ['type', 'show-password'], | |
| demos: ['password'] | |
| }, | |
| { | |
| id: 'icon', | |
| name: '带图标', | |
| support: { | |
| value: true | |
| }, | |
| description: '通过 prefix-icon 或 suffix-icon 设置输入框前后图标。', | |
| cloud: { | |
| value: true | |
| }, | |
| apis: ['prefix-icon', 'suffix-icon'], | |
| demos: ['icon'] | |
| }, | |
| { | |
| id: 'textarea', | |
| name: '文本域', | |
| support: { | |
| value: true | |
| }, | |
| description: '通过 type="textarea" 设置文本域，rows 设置行数，autosize 自适应内容高度。', | |
| cloud: { | |
| value: true | |
| }, | |
| apis: ['type', 'rows', 'autosize'], | |
| demos: ['textarea'] | |
| }, | |
| { | |
| id: 'events', | |
| name: '事件', | |
| support: { | |
| value: true | |
| }, | |
| description: '支持 focus、blur、change、input、clear 等事件。', | |
| cloud: { | |
| value: true | |
| }, | |
| apis: ['focus', 'blur', 'change', 'input', 'clear'], | |
| demos: ['events'] | |
| } | |
| features: [ | |
| { | |
| id: 'basic', | |
| name: '基本用法', | |
| support: { | |
| value: true | |
| }, | |
| description: '通过 v-model 绑定输入值，placeholder 设置占位文本。', | |
| cloud: { | |
| value: true | |
| }, | |
| apis: ['v-model', 'placeholder'], | |
| demos: ['basic-usage'] | |
| }, | |
| { | |
| id: 'size', | |
| name: '尺寸', | |
| support: { | |
| value: true | |
| }, | |
| description: '通过 size 设置输入框大小，可选值：medium、small、mini。', | |
| cloud: { | |
| value: true | |
| }, | |
| apis: ['size'], | |
| demos: ['size'] | |
| }, | |
| { | |
| id: 'disabled', | |
| name: '禁用状态', | |
| support: { | |
| value: true | |
| }, | |
| description: '通过 disabled 设置输入框禁用状态。', | |
| cloud: { | |
| value: true | |
| }, | |
| apis: ['disabled'], | |
| demos: ['disabled'] | |
| }, | |
| { | |
| id: 'readonly', | |
| name: '只读状态', | |
| support: { | |
| value: true | |
| }, | |
| description: '通过 readonly 设置输入框只读状态。', | |
| cloud: { | |
| value: true | |
| }, | |
| apis: ['readonly'], | |
| demos: ['readonly'] | |
| }, | |
| { | |
| id: 'clearable', | |
| name: '可清空', | |
| support: { | |
| value: true | |
| }, | |
| description: '通过 clearable 设置是否可清空。', | |
| cloud: { | |
| value: true | |
| }, | |
| apis: ['clearable'], | |
| demos: ['clearable'] | |
| }, | |
| { | |
| id: 'password', | |
| name: '密码框', | |
| support: { | |
| value: true | |
| }, | |
| description: '通过 type="password" 设置密码输入框，show-password 显示切换密码图标。', | |
| cloud: { | |
| value: true | |
| }, | |
| apis: ['type', 'show-password'], | |
| demos: ['show-password'] | |
| }, | |
| { | |
| id: 'icon', | |
| name: '带图标', | |
| support: { | |
| value: true | |
| }, | |
| description: '通过 prefix-icon 或 suffix-icon 设置输入框前后图标。', | |
| cloud: { | |
| value: true | |
| }, | |
| apis: ['prefix-icon', 'suffix-icon'], | |
| demos: ['icon'] | |
| }, | |
| { | |
| id: 'textarea', | |
| name: '文本域', | |
| support: { | |
| value: true | |
| }, | |
| description: '通过 type="textarea" 设置文本域，rows 设置行数，autosize 自适应内容高度。', | |
| cloud: { | |
| value: true | |
| }, | |
| apis: ['type', 'rows', 'autosize'], | |
| demos: ['rows', 'resize'] | |
| }, | |
| { | |
| id: 'events', | |
| name: '事件', | |
| support: { | |
| value: true | |
| }, | |
| description: '支持 focus、blur、change、input、clear 等事件。', | |
| cloud: { | |
| value: true | |
| }, | |
| apis: ['focus', 'blur', 'change', 'input', 'clear'], | |
| demos: ['event'] | |
| } | |
| ] |
| value: true | ||
| }, | ||
| apis: ['show-close', 'close-on-click-modal'], | ||
| demos: ['close'] |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Missing demo reference
The close property points to a demo called "close", but there's no corresponding demo with this ID in the demos array. Consider updating this to reference an existing demo that demonstrates these features, like "modal-mask" (line 169).
- demos: ['close']
+ demos: ['modal-mask']📝 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. Thoroughly test & benchmark the code to ensure it meets the requirements.
| demos: ['close'] | |
| demos: ['modal-mask'] |
PR
完善以下组件的特性列表(features)：
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