组件与依赖索引
本页依据 3.9.5 的 src/ui/element-plus/index.ts、src/ui/data/index.ts 和 src/index.ts 整理：46 个基础/通用组件、23 个数据展示组件。app.use(Avue) 会统一注册下表标签；每个链接进入对应配置和示例。
标签、导出与字段类型
- 模板直接使用
<avue-input-number v-model="count" />时，使用组件标签和独立组件属性。 - Form 中使用
{ prop: 'count', type: 'number' }时，使用表单字段配置，由 Form 创建控件。 InputNumber是 JavaScript 具名导出名，不是column.type的通用命名规则。
独立组件的字典用 dic，Form/CRUD 字段通常用 dicData、dicUrl 等配置；值和事件的差异见基础组件通用用法。
组件依赖 Avue 安装时注入的全局配置、工具和相关子组件。只 app.component() 注册一个导出不等价于完成安装；首次接入请按快速上手注册 Element Plus、Avue、图标和样式。
基础与通用组件
| 具名导出 | 组件标签 | 文档 |
|---|---|---|
CountUp | avue-count-up | 用法与示例 |
Article | avue-article | 用法与示例 |
Crud | avue-crud | 用法与示例 |
Chat | avue-chat | 用法与示例 |
Comment | avue-comment | 用法与示例 |
Form | avue-form | 用法与示例 |
Checkbox | avue-checkbox | 用法与示例 |
Date | avue-date | 用法与示例 |
Draggable | avue-draggable | 用法与示例 |
Flow | avue-flow | 用法与示例 |
Group | avue-group | 用法与示例 |
License | avue-license | 用法与示例 |
Time | avue-time | 用法与示例 |
Input | avue-input | 用法与示例 |
Radio | avue-radio | 用法与示例 |
Select | avue-select | 用法与示例 |
Cascader | avue-cascader | 用法与示例 |
InputColor | avue-input-color | 用法与示例 |
InputNumber | avue-input-number | 用法与示例 |
InputTree | avue-input-tree | 用法与示例 |
InputMap | avue-input-map | 用法与示例 |
InputIcon | avue-input-icon | 用法与示例 |
InputTag | avue-input-tag | 用法与示例 |
InputTable | avue-input-table | 用法与示例 |
InputCron | avue-input-cron | 用法与示例 |
InputOtp | avue-input-otp | 用法与示例 |
Mention | avue-mention | 用法与示例 |
Captcha | avue-captcha | 用法与示例 |
Switchs | avue-switch | 用法与示例 |
Rate | avue-rate | 用法与示例 |
Upload | avue-upload | 用法与示例 |
Sign | avue-sign | 用法与示例 |
Slider | avue-slider | 用法与示例 |
Tree | avue-tree | 用法与示例 |
Title | avue-title | 用法与示例 |
Search | avue-search | 用法与示例 |
Tabs | avue-tabs | 用法与示例 |
Dynamic | avue-dynamic | 用法与示例 |
Video | avue-video | 用法与示例 |
Login | avue-login | 用法与示例 |
Arrays | avue-array | 用法与示例 |
textEllipsis | avue-text-ellipsis | 用法与示例 |
QRCode | avue-qrcode | 用法与示例 |
Iframe | avue-iframe | 用法与示例 |
FilterBuilder | avue-filter-builder | 用法与示例 |
FileManager | avue-file-manager | 用法与示例 |
数据展示组件
| 具名导出 | 组件标签 | 文档 |
|---|---|---|
DataTabs | avue-data-tabs | 用法与示例 |
DataCardText | avue-data-cardtext | 用法与示例 |
DataBox | avue-data-box | 用法与示例 |
DataProgress | avue-data-progress | 用法与示例 |
DataIcons | avue-data-icons | 用法与示例 |
DataCard | avue-data-card | 用法与示例 |
DataDisplay | avue-data-display | 用法与示例 |
DataImgText | avue-data-imgtext | 用法与示例 |
DataOperaText | avue-data-operatext | 用法与示例 |
DataRotate | avue-data-rotate | 用法与示例 |
DataPay | avue-data-pay | 用法与示例 |
DataPrice | avue-data-price | 用法与示例 |
DataPanel | avue-data-panel | 用法与示例 |
DataStatistic | avue-data-statistic | 用法与示例 |
DataWeather | avue-data-weather | 用法与示例 |
DataRank | avue-data-rank | 用法与示例 |
DataProfile | avue-data-profile | 用法与示例 |
DataProduct | avue-data-product | 用法与示例 |
DataCountdown | avue-data-countdown | 用法与示例 |
DataNotice | avue-data-notice | 用法与示例 |
DataTask | avue-data-task | 用法与示例 |
DataList | avue-data-list | 用法与示例 |
DataDashboard | avue-data-dashboard | 用法与示例 |
按功能加载依赖
基础表单和表格不需要安装下面全部依赖。只在使用对应功能时引入；源码读取浏览器全局变量的功能，需要在首次渲染该功能之前完成赋值。
| 功能 | 运行时需要 | 对应文档 |
|---|---|---|
| CRUD / Dynamic 拖拽、可拖拽多选、上传列表排序 | window.Sortable | 行拖拽、动态表单 |
| Excel 导入、导出 | window.XLSX，样式导出可使用 xlsx-js-style | Excel |
| 页面截图 | renderer 函数或 window.html2canvas | 截图 |
| 表单 Mock 数据 | window.Mock | 模拟数据 |
| 流程图连线与节点拖动 | 浏览器全局 jsPlumb | 流程图 |
| 高德地图输入 | window.AMap、window.AMapUI，以及项目地图服务配置 | 地图 |
| 腾讯云上传 | window.COS 及 cos 配置 | 上传 |
| 阿里云上传 | window.OSS 及 ali 配置 | 上传 |
| 七牛云上传 | window.CryptoJS 及 qiniu 配置 | 上传 |
例如项目需要拖拽和 Excel，可以按需安装：
pnpm add sortablejs xlsx-js-styleimport Sortable from 'sortablejs'
import * as XLSX from 'xlsx-js-style'
window.Sortable = Sortable
window.XLSX = XLSX
// 随后执行项目入口中 app.mount(...)在 SSR 项目中，把浏览器依赖赋值放在客户端入口。TypeScript 项目如需声明全局变量，应使用项目的 .d.ts 为 Window 增加实际使用的成员。
二维码使用包内二维码依赖生成，不需要另行注入二维码 SDK。数据组件的数据由 option 或 data 传入，展示天气、商品、任务等内容不会自动请求业务接口。
方法与扩展
插件、工具函数见全局 API，语言注册见国际化，类型导出见TypeScript。v-contextmenu 是安装时注册的指令，使用方式见右键菜单。