Vue3.x+element-plus+ts踩坑笔记( 二 ) _生活百科

leftMenu.vue

文章插图

文章插图
<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>subMenu.vue
解决方案一：修改 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'import * as Icons from '@element-plus/icons-vue'const app = createApp(App)Object.keys(Icons).forEach(key => {app.component(key, Icons[key as keyof typeof Icons])})app.use(store)app.use(router)app.use(ElementPlus)app.mount('#app')解决方案二：将 main.ts 改回原来的
import { createApp } from 'vue'import App from './App.vue'import router from './router'import store from './store'createApp(App).use(store).use(router).mount('#app')//公共cssimport './assets/css/index.scss'将subMenu.vue组件的 js 代码改为
import { defineComponent } from "vue";import {Document,Menu as IconMenu,Location,Setting,Menu,Grid,} from "@element-plus/icons-vue";import { useRouter } from "vue-router";import { useStore } from "vuex";export default defineComponent({components: {Document,Menu,Location,Setting,Grid,},props: {menuInfo: {type: Object,default: () => {return {id: "",parent_id: "",m_name: "",icon: "",childs: [],};},},},setup() {//路由const router = useRouter();//vuexconst store = useStore();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 });};return {menuFun,};},});</script>参考哪里忘记了，第一种是面向百度的，第二种是小颖自己试出来的
来来来找到了，参考这里；vue3 动态加载el-icon图标
3.vuex页面刷新数据丢失问题的四种解决方式解决方案：第一步：执行以下代码
npm install --save vuex-persist第二步：在 store 下的 index.ts 中引入并使用
import VuexPersistence from "vuex-persist";//解决页面刷新vuex数据丢失const vuexLocal = new VuexPersistence({storage: window.localStorage})export default createStore({state: {},getters: {},mutations: {},actions: {},modules: modules,plugins: [vuexLocal.plugin]})更多方法参考：vuex页面刷新数据丢失问题的四种解决方式

Vue3.x+element-plus+ts踩坑笔记( 二 )

经验总结扩展阅读

派对之星兑换码大全

染发女人到了花甲之年，尝试这些“白发造型”才高级，比染发洋气多了

风采依然意思是什么风采依然的解释

青春期早恋如何疏导

胶卷怎么洗胶片的冲洗步骤

一生坎坷多灾难八字解读

女子远嫁后和老公吵架，一气之下回娘家，父母闭门不见

云南省名茶普洱茶属于什么茶普洱茶属于什么茶类

心灵小店|中秋团圆，被想念的你也在想念远方的他吗？

知了的特点

心贴心服务企业破解难题暖人心

莜面和荞面的区别有哪些,荞麦面与莜面有什么区别,荞麦面和莜麦面的区别

美发六小招卷发变形妙调教

风雨兼程 1984年，程琳一曲《风雨兼程》，传遍九州方圆！

2022年12月31日大写怎么写教你如何书写2022年12月31日大写

碗有三不端，门有三不进，人有三不交（牢记）

喝战马电竞椅上日rita是什么梗

如何设置卡西欧手表闹钟,这种卡西欧手表如何关掉闹钟，老是在12点响很多次-烦人。谢谢！

未结话费是什么意思

什么是庸俗唯物主义关于庸俗唯物主义的解释