diff --git a/web/apps/web-ele/src/bootstrap.ts b/web/apps/web-ele/src/bootstrap.ts index 1646696..1153b6c 100644 --- a/web/apps/web-ele/src/bootstrap.ts +++ b/web/apps/web-ele/src/bootstrap.ts @@ -8,8 +8,6 @@ import '@vben/styles'; import '@vben/styles/ele'; import { useTitle } from '@vueuse/core'; -import ElementPlus from 'element-plus'; -import { ElLoading } from 'element-plus'; import { $t, setupI18n } from '#/locales'; @@ -17,6 +15,7 @@ import { initComponentAdapter } from './adapter/component'; import { initSetupVbenForm, useVbenForm } from './adapter/form'; import App from './app.vue'; import { setupZqTable } from './components/zq-table'; +import { setupElementPlus } from './plugins/element-plus'; import { router } from './router'; async function bootstrap(namespace: string) { @@ -41,10 +40,7 @@ async function bootstrap(namespace: string) { // }); const app = createApp(App); - app.use(ElementPlus); - - // 注册Element Plus提供的v-loading指令 - app.directive('loading', ElLoading.directive); + setupElementPlus(app); // 注册Vben提供的v-loading和v-spinning指令 registerLoadingDirective(app, { diff --git a/web/apps/web-ele/src/plugins/element-plus.ts b/web/apps/web-ele/src/plugins/element-plus.ts new file mode 100644 index 0000000..4a633b6 --- /dev/null +++ b/web/apps/web-ele/src/plugins/element-plus.ts @@ -0,0 +1,145 @@ +import type { App, Plugin } from 'vue'; + +import { ElAlert } from 'element-plus/es/components/alert/index'; +import { ElAvatar } from 'element-plus/es/components/avatar/index'; +import { ElBadge } from 'element-plus/es/components/badge/index'; +import { + ElBreadcrumb, + ElBreadcrumbItem, +} from 'element-plus/es/components/breadcrumb/index'; +import { ElButton, ElButtonGroup } from 'element-plus/es/components/button/index'; +import { ElCard } from 'element-plus/es/components/card/index'; +import { ElCascader } from 'element-plus/es/components/cascader/index'; +import { + ElCheckbox, + ElCheckboxButton, + ElCheckboxGroup, +} from 'element-plus/es/components/checkbox/index'; +import { + ElCollapse, + ElCollapseItem, +} from 'element-plus/es/components/collapse/index'; +import { ElColorPicker } from 'element-plus/es/components/color-picker/index'; +import { ElConfigProvider } from 'element-plus/es/components/config-provider/index'; +import { ElDatePicker } from 'element-plus/es/components/date-picker/index'; +import { + ElDescriptions, + ElDescriptionsItem, +} from 'element-plus/es/components/descriptions/index'; +import { ElDialog } from 'element-plus/es/components/dialog/index'; +import { ElDivider } from 'element-plus/es/components/divider/index'; +import { ElDrawer } from 'element-plus/es/components/drawer/index'; +import { + ElDropdown, + ElDropdownItem, + ElDropdownMenu, +} from 'element-plus/es/components/dropdown/index'; +import { ElEmpty } from 'element-plus/es/components/empty/index'; +import { ElForm, ElFormItem } from 'element-plus/es/components/form/index'; +import { ElIcon } from 'element-plus/es/components/icon/index'; +import { ElImageViewer } from 'element-plus/es/components/image-viewer/index'; +import { ElInput } from 'element-plus/es/components/input/index'; +import { ElInputNumber } from 'element-plus/es/components/input-number/index'; +import { ElLoading } from 'element-plus/es/components/loading/index'; +import { ElPagination } from 'element-plus/es/components/pagination/index'; +import { ElPopconfirm } from 'element-plus/es/components/popconfirm/index'; +import { ElPopover } from 'element-plus/es/components/popover/index'; +import { ElProgress } from 'element-plus/es/components/progress/index'; +import { + ElRadio, + ElRadioButton, + ElRadioGroup, +} from 'element-plus/es/components/radio/index'; +import { ElScrollbar } from 'element-plus/es/components/scrollbar/index'; +import { ElOption, ElSelect } from 'element-plus/es/components/select/index'; +import { + ElSkeleton, + ElSkeletonItem, +} from 'element-plus/es/components/skeleton/index'; +import { ElSlider } from 'element-plus/es/components/slider/index'; +import { + ElSplitter, + ElSplitterPanel, +} from 'element-plus/es/components/splitter/index'; +import { ElSwitch } from 'element-plus/es/components/switch/index'; +import { ElTable, ElTableColumn } from 'element-plus/es/components/table/index'; +import { ElTabPane, ElTabs } from 'element-plus/es/components/tabs/index'; +import { ElTag } from 'element-plus/es/components/tag/index'; +import { + ElTimeline, + ElTimelineItem, +} from 'element-plus/es/components/timeline/index'; +import { ElTooltip } from 'element-plus/es/components/tooltip/index'; +import { ElTree } from 'element-plus/es/components/tree/index'; +import { ElUpload } from 'element-plus/es/components/upload/index'; + +const components: Plugin[] = [ + ElAlert, + ElAvatar, + ElBadge, + ElBreadcrumb, + ElBreadcrumbItem, + ElButton, + ElButtonGroup, + ElCard, + ElCascader, + ElCheckbox, + ElCheckboxButton, + ElCheckboxGroup, + ElCollapse, + ElCollapseItem, + ElColorPicker, + ElConfigProvider, + ElDatePicker, + ElDescriptions, + ElDescriptionsItem, + ElDialog, + ElDivider, + ElDrawer, + ElDropdown, + ElDropdownItem, + ElDropdownMenu, + ElEmpty, + ElForm, + ElFormItem, + ElIcon, + ElImageViewer, + ElInput, + ElInputNumber, + ElOption, + ElPagination, + ElPopconfirm, + ElPopover, + ElProgress, + ElRadio, + ElRadioButton, + ElRadioGroup, + ElScrollbar, + ElSelect, + ElSkeleton, + ElSkeletonItem, + ElSlider, + ElSplitter, + ElSplitterPanel, + ElSwitch, + ElTable, + ElTableColumn, + ElTabPane, + ElTabs, + ElTag, + ElTimeline, + ElTimelineItem, + ElTooltip, + ElTree, + ElUpload, +]; + +function setupElementPlus(app: App) { + for (const component of components) { + app.use(component); + } + + app.directive('loading', ElLoading.directive); +} + +export { setupElementPlus };