搭建网站 程序,东海做网站公司,阜新百姓网,今题网免费发布信息网我在使用element plus的menu#xff08;侧边栏#xff09;组件的过程中遇到了一些问题#xff0c;就是menu编写样式和路由跳转#xff0c;下面给大家分享以下#xff0c;我是怎么解决的。 1.页面效果
我要实现的网站布局是这样的#xff1a; 侧边栏折叠以后的效果#… 我在使用element plus的menu侧边栏组件的过程中遇到了一些问题就是menu编写样式和路由跳转下面给大家分享以下我是怎么解决的。 1.页面效果
我要实现的网站布局是这样的 侧边栏折叠以后的效果 网站的布局我是用element plus官网提供的布局方式 2.样式 下面是对应的style设置
这里我用了tailwind css。 3.路由 4.路由对应的页面
1.HomeView.vue 2.AboutView.vu 3.LayoutView.vue
script setup
import { Expand, Fold, HomeFilled, InfoFilled } from element-plus/icons-vue;
import {ref} from vue;const isSidebarOpen ref(false)/scripttemplatediv classcommon-layoutel-containerel-aside :class{is-sidebar-open:isSidebarOpen} width200px classbg-gray-800 h-screen!--最上面logo--div class-ml-2 h-16 flex items-center justify-centerimg classobject-cover h-14 w-14 src/assets/images/A%20拷贝.png altlogoh1 v-show!isSidebarOpen class-ml-2 text-2xl text-white font-boldBlog/h1/divel-menu:collapseisSidebarOpen:collapse-transitionfalserouter:default-active$route.pathbackground-color#1f2937text-color#fffstyleborder: noneel-menu-item index/home route/homeel-iconHomeFilled //el-iconspan classfont-semiboldHome/span/el-menu-itemel-menu-item index/about route/aboutel-iconInfoFilled //el-iconspan classfont-semiboldAbout/span/el-menu-item/el-menu/el-asideel-containerel-header classh-16 shadow-md z-10 flex items-center justify-betweendivbutton clickisSidebarOpen !isSidebarOpenel-iconcomponent :isisSidebarOpen ? Expand : Fold/component/el-icon/button/divdiv classflex items-center space-x-4h1 classfont-mediumAkbarSmile/h1img classw-10 h-10 rounded-full src/assets/images/Mofei1-cut.jpg altavatar/div/el-headerel-main classbg-slate-100router-view/router-view/el-main/el-container/el-container/div
/templatestyle scoped
aside {apply transition-all duration-300;
}
.is-sidebar-open {apply w-16;
}.el-menu {apply w-full
}
.el-menu--collapse .el-menu-item {apply p-0 m-0 flex items-center justify-center;
}
.el-menu-item.is-active {apply bg-purple-600 text-white w-full ;
}
/style可能很多同学没有使用过tailwind css但是用普通的css代码也可以实现同样的效果。 大家自己打开多研究研究其实能找到找技巧的话element plus非常好用。
