1. 首頁 > 生活百科 > >

Vue3.x+element-plus+ts踩坑筆記

生活百科

閑聊前段時間小穎在B站找了個學習vue3+TS的視頻 ， 自己嘗試著搭建了一些基礎代碼，在實現功能的過程中遇到了一些問題，為了防止自己遺忘 ， 寫個隨筆記錄一下嘻嘻
項目代碼git地址:vue3.0-ts-element-plus--demo" rel="external nofollow noreferrer">vue3.x-ts-element-plus--demo
踩坑集合：1.根據 element-plus 官網提示 按需引入 組件后 ， 遇到：ElLoading、ElMessage、ElNotification、ElMessageBox  樣式丟失起因是小穎在封裝  axios 時 ， 發現引入的  ElNotification 組件沒有樣式，表單提交時加載  ElLoading 組件有沒有樣式，后來通過面向百度解決了該問題，嘻嘻
解決方案一：第一步：執行下面代碼
npm i unplugin-element-plus -D第二步：在 vue.config.js 改為
const { defineConfig } = require('@vue/cli-service')const AutoImport = require('unplugin-auto-import/webpack')const Components = require('unplugin-vue-components/webpack')const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')module.exports = defineConfig({  transpileDependencies: true,  configureWebpack: {    plugins: [      AutoImport({        resolvers: [ElementPlusResolver()],      }),      Components({        resolvers: [ElementPlusResolver()],      }),      require('unplugin-element-plus/webpack')({        // options      }),    ],  },})解決方案二：直接全局引入 element-plus
第一步：修改 main.ts
import { createApp } from 'vue'import App from './App.vue'import router from './router'import store from './store'import ElementPlus from 'element-plus'import 'element-plus/es/components/button/style/css'createApp(App).use(store).use(router).use(ElementPlus).mount('#app')【Vue3.x+element-plus+ts踩坑筆記】參考：記錄-解決element-plus自動引入后ElLoading、ElMessage、ElNotification、ElMessageBox樣式丟失的問題
2.動態使用圖標組件時，圖標組件不能正確渲染起因是小穎在封裝菜單組件時，要動態遍歷菜單數據根據數據中的  icon 值，通過：
<component :is="menuInfo.icon" class="menu-icon" />動態渲染各自的菜單圖標，但是沒有渲染出來，通過F12發現渲染出來的dom就不是圖標組件的dom，而是這樣的：
當前 menuInfo.icon 值為：setting

Vue3.x+element-plus+ts踩坑筆記

文章插圖
左側菜單組件因考慮到菜單可能不止兩級可能會是多級的所以小穎將其封裝成以下組件：
Vue3.x+element-plus+ts踩坑筆記

文章插圖
Vue3.x+element-plus+ts踩坑筆記

文章插圖
<template><div class="logo-box">XXXX管理系統</div><div class="menu-box"><el-menuactive-text-color="#ffd04b"background-color="#545c64"class="el-menu-vertical":default-active="menuActive":unique-opened="true"text-color="#fff"@open="handleOpen"@close="handleClose"><template v-for="menu in menuList" :key="menu.id"><subMenu :menuInfo="menu" /></template></el-menu></div></template><script lang="ts" setup>import { defineProps, computed } from "vue";import { useStore } from "vuex";import SubMenu from "./subMenu.vue";const store = useStore();const props = defineProps({menuList: {type: Array,default: () => [],},});const menuActive = computed(() => {return store.state.setting.menuActive;});const handleOpen = (key: string, keyPath: string[]) => {console.log(key, keyPath);};const handleClose = (key: string, keyPath: string[]) => {console.log(key, keyPath);};</script><style lang="scss" scoped>.logo-box {height: 80px;display: flex;justify-content: center;align-items: center;font-size: 20px;cursor: pointer;background-color: #545c64;color: #fff;// background: v-bind(themeBackground);}.menu-box {height: calc(100vh - 80px);background-color: #545c64;}.el-menu-vertical {border-right: none;}.el-menu-vertical:not(.menu--collapse) {min-height: 400px;}</style>leftMenu.vue
Vue3.x+element-plus+ts踩坑筆記

文章插圖
Vue3.x+element-plus+ts踩坑筆記

文章插圖
<template><el-sub-menu v-if="menuInfo.childs.length > 0" :index="menuInfo.id"><template #title><el-icon :size="18"><component :is="menuInfo.icon" /></el-icon><span>{{ menuInfo.m_name }}</span></template><template v-for="item in menuInfo.childs" :key="item.id"><sub-menu :menu-info="item" /></template></el-sub-menu><el-menu-item v-else :index="menuInfo.id"@click="menuFun(menuInfo, menuInfo.id)" ><el-icon :size="18"><component :is="menuInfo.icon" class="menu-icon" /></el-icon><span>{{ menuInfo.m_name }}</span></el-menu-item></template><script lang="ts" name="SubMenu" setup>import {Document,Menu as IconMenu,Location,Setting,Menu,Grid,} from "@element-plus/icons-vue";import { defineProps } from "vue";import { useRouter } from "vue-router";import { useStore } from "vuex";//路由const router = useRouter();//vuexconst store = useStore();const props = defineProps({menuInfo: {type: Object,default: () => {return {id: "",parent_id: "",m_name: "",icon: "",childs: [],};},},});const menuFun = (event: any, index: string) => {setNav(event);store.dispatch("setMenuActive", { menuActive: index });if (event.url && event.url.length > 0) {router.push({path: event.url,query: {},});}};const setNav = (item: any) => {store.dispatch("setNav", { nav: item });};</script>

推薦閱讀