withInstall位于packages/utils/vue/install.ts
withInstall是一个工具函数，用于将 Vue 组件转换为 Vue 插件，使其支持 Vue 的插件 API。
vue关于Plugins插件的篇章：插件 | Vue.js
Object.values(): Object.values() - JavaScript | MDN
Object.entries(): Object.entries() - JavaScript | MDN
/**
* withInstall 函数用于将组件或指令安装到 Vue 应用中。
* 它接受两个参数：
* - main: 主组件或指令
* - extra: 可选的额外组件或指令
*
* 返回值是一个组件或指令，它具有 install 方法，可以将主组件或指令安装到 Vue 应用中。
*
* 示例：
* const Button = withInstall(ButtonComponent, { ButtonGroup })
* Button.install(app)
*
* 在这个例子中，Button 组件被安装到 Vue 应用中，并且 ButtonGroup 组件也被安装到 Vue 应用中。
*
*/
export const withInstall = <T, E extends Record<string, any>>(
main: T,
extra?: E
) => {
// ；防止前一行代码缺少分号导致语法错误
// (main as SFCWithInstall<T>)将main断言为SFCWithInstall<T>类型
// main.install = (app): void => {} 给main添加install方法
;(main as SFCWithInstall<T>).install = (app): void => {
for (const comp of [main, ...Object.values(extra ?? {})]) {
app.component(comp.name, comp)
}
}
// 额外组件作为属性挂载到主组件上，便于通过主组件访问子组件。
if (extra) {
for (const [key, comp] of Object.entries(extra)) {
;(main as any)[key] = comp
}
}
return main as SFCWithInstall<T> & E
}
element-plus 项目中所有使用 withInstall 的组件列表：
使用 withInstall 的组件列表
1. 简单用法（只传入主组件）
这些组件只使用主组件，没有额外组件：
affix- 固钉alert- 警告anchor- 锚点autocomplete- 自动完成avatar- 头像backtop- 回到顶部badge- 徽章calendar- 日历card- 卡片carousel- 走马灯cascader-panel- 级联选择器面板check-tag- 可选择标签checkbox- 复选框collapse-transition- 折叠过渡col- 列color-picker-panel- 颜色选择器面板config-provider- 全局配置countdown- 倒计时date-picker-panel- 日期选择器面板descriptions- 描述列表dialog- 对话框divider- 分割线drawer- 抽屉dropdown- 下拉菜单empty- 空状态form- 表单icon- 图标image- 图片image-viewer- 图片查看器input- 输入框input-number- 数字输入框input-tag- 输入标签link- 链接mention- 提及message- 消息提示notification- 通知page-header- 页头pagination- 分页popconfirm- 气泡确认框popover- 弹出框popper- 弹出层progress- 进度条radio- 单选框rate- 评分result- 结果row- 行scrollbar- 滚动条segmented- 分段控制器select-v2- 选择器 V2skeleton- 骨架屏slider- 滑块space- 间距splitter- 分割面板statistic- 统计数值steps- 步骤条switch- 开关table-v2- 表格 V2tag- 标签teleport- 传送门text- 文本time-picker- 时间选择器time-select- 时间选择timeline- 时间线tooltip- 文字提示transfer- 穿梭框tree- 树形控件tree-select- 树形选择tree-v2- 树形控件 V2upload- 上传watermark- 水印
示例：
export const ElInput: SFCWithInstall<typeof Input> = withInstall(Input)
2. 带额外组件（传入 extra 参数）
这些组件包含子组件，通过 extra 参数一起注册：
Button（按钮）
export const ElButton: SFCWithInstall<typeof Button> & {
ButtonGroup: typeof ButtonGroup
} = withInstall(Button, {
ButtonGroup,
})
Container（布局容器）
export const ElContainer: SFCWithInstall<typeof Container> & {
Aside: typeof Aside
Footer: typeof Footer
Header: typeof Header
Main: typeof Main
} = withInstall(Container, {
Aside,
Footer,
Header,
Main,
})
Tabs（标签页）
export const ElTabs: SFCWithInstall<typeof Tabs> & {
TabPane: typeof TabPane
} = withInstall(Tabs, {
TabPane,
})
Menu（菜单）
export const ElMenu: SFCWithInstall<typeof Menu> & {
MenuItem: typeof MenuItem
MenuItemGroup: typeof MenuItemGroup
SubMenu: typeof SubMenu
} = withInstall(Menu, {
MenuItem,
MenuItemGroup,
SubMenu,
})
Breadcrumb（面包屑）
export const ElBreadcrumb: SFCWithInstall<typeof Breadcrumb> & {
BreadcrumbItem: typeof BreadcrumbItem
} = withInstall(Breadcrumb, {
BreadcrumbItem,
})
其他带额外组件的：
table- 表格（包含子组件）tour- 漫游式引导（包含子组件）date-picker- 日期选择器（可能包含子组件）color-picker- 颜色选择器（可能包含子组件）select- 选择器（可能包含子组件）cascader- 级联选择器（可能包含子组件）
统计
- 总计：约 86 个文件使用
withInstall - 简单用法：约 70+ 个组件
- 带额外组件：约 10+ 个组件
所有 Element Plus 组件都通过 withInstall 包装，以支持 Vue 插件 API，便于全局注册和按需使用。
