diff --git a/src/main.ts b/src/main.ts index 7b320ae0..f68976ec 100644 --- a/src/main.ts +++ b/src/main.ts @@ -8,10 +8,11 @@ import App from './App.vue'; // Register icon sprite // import 'virtual:svg-icons-register' -import { configMainElementPlus, configMainGlobalProperties, getServerConfig } from './utils'; +import { configMainGlobalProperties, getServerConfig } from './utils'; import { configMainStore } from './store'; import { configMainI18n } from './locales'; import { configMainRouter } from './router'; +import { useElementPlus } from './utils/plugin/element'; const app = createApp(App); @@ -29,7 +30,7 @@ getServerConfig().then((_config) => { configMainI18n(app); // ElementPlus - configMainElementPlus(app); + useElementPlus(app); app.mount('#app'); }); diff --git a/src/utils/index.ts b/src/utils/index.ts index 6b1ccd9a..e2abe73e 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -1,23 +1,23 @@ import { App } from 'vue'; -import * as ElIconModules from '@element-plus/icons-vue'; -import ElementPlus from 'element-plus'; +// import * as ElIconModules from '@element-plus/icons-vue'; +// import ElementPlus from 'element-plus'; import 'element-plus/dist/index.css'; import 'es6-promise/auto'; import 'virtual:svg-icons-register'; import { setWindowAppConfig } from '@/store/modules/app'; // 注册element-plus icon -export const configMainElementPlus = (app: App): void => { - app.use(ElementPlus); - const myElIconModules: any = ElIconModules; - for (const iconName in myElIconModules) { - app.component(transElIconName(iconName), myElIconModules[iconName]); - } -}; +// export const configMainElementPlus = (app: App): void => { +// // app.use(ElementPlus); +// // const myElIconModules: any = ElIconModules; +// // for (const iconName in myElIconModules) { +// // app.component(transElIconName(iconName), myElIconModules[iconName]); +// // } +// }; -const transElIconName = (iconName: string): string => { - return 'iEL' + iconName.replace(/[A-Z]/g, (match) => '-' + match.toLowerCase()); -}; +// const transElIconName = (iconName: string): string => { +// return 'iEL' + iconName.replace(/[A-Z]/g, (match) => '-' + match.toLowerCase()); +// }; // 定义全局钩子 export const configMainGlobalProperties = (app: App): void => { diff --git a/src/utils/plugin/element.ts b/src/utils/plugin/element.ts new file mode 100644 index 00000000..aa39cee5 --- /dev/null +++ b/src/utils/plugin/element.ts @@ -0,0 +1,83 @@ +import { App, Component } from 'vue'; +import { + ElTag, + ElButton, + ElInput, + ElScrollbar, + ElMenu, + ElMenuItem, + ElSubMenu, + ElBreadcrumb, + ElBreadcrumbItem, + ElIcon, + ElTooltip, + ElDrawer, + ElRow, + ElCol, + ElCard, + ElDescriptions, + ElDescriptionsItem, + ElDropdown, + ElDropdownItem, + ElDropdownMenu, + ElForm, + ElFormItem, + ElAlert, + // 指令 + ElLoading, + ElInfiniteScroll, +} from 'element-plus'; + +// Directives +const plugins = [ElLoading, ElInfiniteScroll]; + +const components = [ + ElTag, + ElButton, + ElInput, + ElScrollbar, + ElMenu, + ElMenuItem, + ElSubMenu, + ElBreadcrumb, + ElBreadcrumbItem, + ElIcon, + ElTooltip, + ElDrawer, + ElRow, + ElCol, + ElCard, + ElDescriptions, + ElDescriptionsItem, + ElDropdown, + ElDropdownItem, + ElDropdownMenu, + ElForm, + ElFormItem, + ElAlert, +]; + +// https://element-plus.org/zh-CN/component/icon.html +import { HomeFilled, Avatar, Operation, Grid, Setting } from '@element-plus/icons-vue'; + +// Icon +export const iconComponents = [HomeFilled, Avatar, Operation, Grid, Setting]; + +export function useElementPlus(app: App) { + // 注册组件 + components.forEach((component: Component) => { + app.component(component.name as string, component); + }); + // 注册指令 + plugins.forEach((plugin) => { + app.use(plugin); + }); + // 注册图标 + iconComponents.forEach((component: Component) => { + app.component(transElIconName(component.name as string), component); + }); +} + +const transElIconName = (iconName: string): string => { + return 'iEL' + iconName.replace(/[A-Z]/g, (match) => '-' + match.toLowerCase()); +};