element-plus

name	element-plus
description	Element Plus Vue 3 UI component library guide. Trigger when user mentions Element Plus components, wants to use UI components like button, form, table, dialog, etc. Provides component index and guides to specific component documentation.

Element Plus 组件库使用指南

组件分类索引

基础组件 (Basic)

• Button - el-button
• Border - el-border
• Color - el-color
• Container - el-container
• Icon - el-icon
• Layout - el-layout
• Link - el-link
• Scrollbar - el-scrollbar
• Space - el-space
• Text - el-text
• Typography - el-typography

表单组件 (Form)

• Autocomplete - el-autocomplete
• Cascader - el-cascader
• Checkbox - el-checkbox
• Color Picker - el-color-picker
• Date Picker - el-date-picker
• Datetime Picker - el-datetime-picker
• Form - el-form
• Input - el-input
• Input Number - el-input-number
• Input Tag - el-input-tag
• Mention - el-mention
• Radio - el-radio
• Rate - el-rate
• Select - el-select
• Select V2 - el-select-v2
• Slider - el-slider
• Switch - el-switch
• Time Picker - el-time-picker
• Time Select - el-time-select
• Transfer - el-transfer
• Upload - el-upload

数据展示 (Data)

• Avatar - el-avatar
• Badge - el-badge
• Calendar - el-calendar
• Card - el-card
• Carousel - el-carousel
• Collapse - el-collapse
• Descriptions - el-descriptions
• Empty - el-empty
• Image - el-image
• Infinite Scroll - el-infinite-scroll
• Pagination - el-pagination
• Progress - el-progress
• Result - el-result
• Skeleton - el-skeleton
• Statistic - el-statistic
• Table - el-table
• Table V2 - el-table-v2
• Tag - el-tag
• Timeline - el-timeline
• Tree - el-tree
• Tree Select - el-tree-select
• Tree V2 - el-tree-v2
• Watermark - el-watermark

反馈组件 (Feedback)

• Alert - el-alert
• Dialog - el-dialog
• Drawer - el-drawer
• Loading - el-loading
• Message - el-message
• Message Box - el-message-box
• Notification - el-notification
• Popconfirm - el-popconfirm
• Popover - el-popover
• Tooltip - el-tooltip
• Tour - el-tour

导航组件 (Navigation)

• Affix - el-affix
• Anchor - el-anchor
• Backtop - el-backtop
• Breadcrumb - el-breadcrumb
• Dropdown - el-dropdown
• Menu - el-menu
• Page Header - el-page-header
• Steps - el-steps
• Tabs - el-tabs

布局组件 (Layout)

• Container - el-container
• Divider - el-divider
• Space - el-space
• Splitter - el-splitter

使用指南

当用户提到具体组件时，请：

1. 识别组件名称（支持中英文，如 "按钮"/"button"）
2. 使用 Skill 工具读取对应的组件 skill：element-plus-{component}
3. 根据组件 API 文档生成正确的代码

常用关键词映射

• 按钮 → Button
• 表单 → Form
• 表格 → Table
• 输入框 → Input
• 选择器/下拉框 → Select
• 对话框/弹窗/modal → Dialog
• 消息/提示 → Message
• 日期选择 → Date Picker
• 分页 → Pagination
• 标签页 → Tabs
• 菜单 → Menu
• 树 → Tree

参考资源

• 官方文档: https://element-plus.org/
• GitHub: https://github.com/element-plus/element-plus