因为我们要根据路由配置对应的图标,也要为了后续方便更改。因此我们将所有的图标注册为全局组件。(使用之前将分页器以及矢量图注册全局组件的自定义插件)(所有图标全局注册的方法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 icon="FullScreen" circle @click="fullScreen" />
顺道写下全屏
功能的实现:
<script lang="ts" setup>
import {reactive,ref} from 'vue';
//全屏功能
const fullScreen = ()=>{//用来判断是不是全屏,返回布尔值const full = document.fullscreenElement//有兼容问题if(full){document.exitFullscreen();}else{document.documentElement.requestFullscreen();}
}
</script>
components
中的组件全局批量注册——避免使用时多次引入
步骤一:在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)