Vue3中element-plus全局使用Icon圖標的過程詳解
Vue項目中使用Element-plus的Icon圖標,包括按鈕和動態(tài)菜單
1、安裝圖標庫
npm install @element-plus/icons
2、注冊
main.ts文件中引入并注冊
import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus' import * as ElIcons from '@element-plus/icons' const app = createApp(App) for (const name in ElIcons){ app.component(name,(ElIcons as any)[name]) } app.use(ElementPlus).mount('#app')
3、在組件中直接使用
// 結合按鈕使用 <el-button type="primary" icon="Edit" >編輯</el-button> <el-button size="mini" type="primary" class="inline-block" icon="More" title="詳情" @click="handleDetail(row.id)" /> // 結合el-icon使用 <el-icon> <delete /> </el-icon>
4、在el-menu組件中動態(tài)使用
如果想在渲染菜單時動態(tài)使用icon圖標,需要使用動態(tài)組件,舉個栗子:
// 路由文件 export const routes: Array<RouteRecordRaw> = [ { path: '/', component: Layout, redirect: 'home', children: [ { path: '/home', component: () => import('@/views/Home.vue'), name: 'Home', meta: { title: '首頁', icon: 'HomeFilled' }, }, ], }, ]
// 使用el-menu的文件 <template> <div> <el-scrollbar wrap-class="scrollbar-wrapper"> <el-menu router :default-active="activeMenu" @open="handleOpen" @close="handleClose" > <template v-for="route in menuList" :key="route.path"> <el-menu-item v-if="!route.children" :index="route.path"> <el-icon> <component :is="route.meta.icon" /> </el-icon> <span>{{ route.meta.title }}</span> </el-menu-item> <el-sub-menu v-else :index="route.path"> <template #title> <el-icon> <component :is="route.meta.icon" /> </el-icon> <span>{{ route.meta.title }}</span> </template> <el-menu-item v-for="subRoute in route.children" :key="subRoute.path" :index="subRoute.path" > <el-icon> <component :is="subRoute.meta.icon" /> </el-icon> <span>{{ subRoute.meta.title }}</span> </el-menu-item> </el-sub-menu> </template> </el-menu> </el-scrollbar> </div> </template> <script lang="ts"> import { defineComponent, computed } from 'vue' import { useRoute } from 'vue-router' import { routes } from '@/router/index' export default defineComponent({ setup() { const route = useRoute() const activeMenu = computed(() => { const { meta, path } = route if (meta.activeMenu) { return meta.activeMenu } return path }) const menuList = computed( () => (routes as any).find((item: any) => item.path === '/').children ) return { activeMenu, menuList } }, }) </script>
總結
到此這篇關于Vue3中element-plus全局使用Icon圖標的文章就介紹到這了,更多相關Vue3 element-plus全局使用Icon圖標內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
Vue3+antDesignVue實現(xiàn)表單校驗的方法
這篇文章主要為大家詳細介紹了基于Vue3和antDesignVue實現(xiàn)表單校驗的方法,文中的示例代碼講解詳細,具有一定的參考價值,需要的小伙伴可以了解下2024-01-01vue-axios同時請求多個接口 等所有接口全部加載完成再處理操作
這篇文章主要介紹了vue-axios同時請求多個接口 等所有接口全部加載完成再處理操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11ant-design-vue中的select選擇器,對輸入值的進行篩選操作
這篇文章主要介紹了ant-design-vue中的select選擇器,對輸入值的進行篩選操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10VUE中的export default和export使用方法解析
export default和export都能導出一個模塊里面的常量,函數(shù),文件,模塊等,在其它文件或模塊中通過import來導入常量,函數(shù),文件或模塊。但是,在一個文件或模塊中export,import可以有多個,export default卻只能有一個。2022-12-12el-table表格動態(tài)合并相同數(shù)據(jù)單元格(可指定列+自定義合并)
工作時遇到的el-table合并單元格的需求,本文主要介紹了el-table表格動態(tài)合并相同數(shù)據(jù)單元格(可指定列+自定義合并),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-07-07