导师让做网站,网页设计与网站建设报告书,优化教程,短视频推广seo隐迅推专业因为我们要根据路由配置对应的图标#xff0c;也要为了后续方便更改。因此我们将所有的图标注册为全局组件。#xff08;使用之前将分页器以及矢量图注册全局组件的自定义插件#xff09;#xff08;所有图标全局注册的方法element-plus文档中已给出#xff09;
全局注册…因为我们要根据路由配置对应的图标也要为了后续方便更改。因此我们将所有的图标注册为全局组件。使用之前将分页器以及矢量图注册全局组件的自定义插件所有图标全局注册的方法element-plus文档中已给出
全局注册elementPlus图标 经过上面的步骤就可以把elementPlus自带的icon图标全局注册了。
路由使用elementPlus图标
给路由元信息添加属性icon 以layout和其子组件为例首先在element-puls找到你要使用的图标的名字。将它添加到路由元信息的icon属性上
{//登录成功以后展示数据的路由path: /,component: () import(/layout/index.vue),name: layout,meta: {title: layout,hidden: false,icon: Avatar,//elementPlus中的图标},children: [{path: /home,component: () import(/views/home/index.vue),meta: {title: 首页,hidden: false,icon: HomeFilled,//elementPlus中的图标},},],
},外部引入的svg图标——vite.config.js中批量引入 import { createSvgIconsPlugin } from vite-plugin-svg-icons;
export default defineConfig(({command,mode}){const env loadEnv(mode,process.cwd())return {plugins:[vue(),AutoImport({resolvers: [ElementPlusResolver(),IconsResolver({prefix: Icon,}),],}),Components({resolvers: [ElementPlusResolver(),IconsResolver({enabledCollections: [ep],}),],}),Icons({autoInstall: true,}),createSvgIconsPlugin({// Specify the icon folder to be cachediconDirs: [path.resolve(process.cwd(), src/assets/icons)],// Specify symbolId formatsymbolId: icon-[dir]-[name],}),]}
})然后svg图标的使用例如全屏图标
el-button iconFullScreen circle clickfullScreen /顺道写下全屏功能的实现
script langts setup
import {reactive,ref} from vue;
//全屏功能
const fullScreen (){//用来判断是不是全屏返回布尔值const full document.fullscreenElement//有兼容问题if(full){document.exitFullscreen();}else{document.documentElement.requestFullscreen();}
}
/scriptcomponents中的组件全局批量注册——避免使用时多次引入 步骤一在components文件夹中新建index.ts文件
步骤二在index.ts文件中引入各个组件
import SvgIcon from ./SvgIcon/index.vue
import Category from /components/Category/index.vue步骤三使用vue中的App和Component
import type { App, Component } from vue
const allGlobalComponent: Component { SvgIcon, Category }步骤四使用install方法来处理
export default {install(app: App) {Object.keys(allGlobalComponent).forEach((key: string) {// 注册为全局组件app.component(key, allGlobalComponent[key])})},
}结合文章中第一步的全局引入elementPlus图标也可以放在此文件中 完整代码如下
import SvgIcon from ./SvgIcon/index.vue
import Category from /components/Category/index.vue
import type { App, Component } from vue
import * as ElementPlusIconsVue from element-plus/icons-vue
const allGlobalComponent: Component { SvgIcon, Category }
export default {install(app: App) {Object.keys(allGlobalComponent).forEach((key: string) {// 注册为全局组件app.component(key, allGlobalComponent[key])})// 将 element-plus 的图标注册为全局组件for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)}},
}main.ts中引入components
import globalComponent from ./components/index
const app createApp(App)
app.use(globalComponent)
