这个问题似乎是 Element Plus 框架中的布局问题,当侧边栏折叠时,主内容区的子组件无法自动占满父容器,导致出现白边。 根据你提供的代码和图片,可以尝试以下方法来解决这个问题: 使用CSS Flexbox 布局:将主内容区的子组件的宽度设置为100%,并使用flex-grow: 1来使其占满剩余空间。这样可以确保当侧边栏折叠时,主...
1.背景 没有使用elementPlus自带的icon图标,而是自己使用的全局svg图标组件。 2.目前情况 侧边栏的结构有一级菜单,二级菜单多样性。 3.目前问题 当侧边栏涉及到收缩的时候,svg图标就显示不正常。 展开: 折叠: 4.解决方法 自己的图标用<el-icon></el-icon>包裹,图标就可以正常显示了。 4.1.代码解决方案: 标...
菜单的折叠与展开Element中默认是有动画的,不方便显示,我们可以选择关闭,在Menu Attribute中,有一个collapse-transition属性。它的作用是是否开启折叠动画,是一个boolean类型,默认值为true,我们把它设置为false,就可以关闭折叠动画了,代码如下: :collapse-transition="false" 1. 在左侧菜单的展开与折叠中,会发现一个问...
collapse:它提供了折叠的能力,如果为true就直接折叠了,如果为false就不折叠了。这里只有纵向需要折叠,横向是不需要折叠的。 菜单栏有router模式,当你使用router模式的时候,它会将侧边的导航栏和你的pass进行关联,也就是和router下面的pass进行相应的关联。每次点击item,那么就跳转到对应的pass页面了。这样菜单栏就不...
element-plus侧边栏收缩伸张 参考文章
import'element-plus/lib/theme-chalk/index.css' constapp=createApp() app.use(ElementPlus) app.mount('#app') 基本用法 Element Plus 的侧边栏组件是ElMenu,它可以通过设置菜单项和子菜单项来构建一个完整的导航菜单。 下面是一个简单的例子: <template> <el-menu:default-active="activeIndex"@select="...
1.安装element plus,可以使用npm或者yarn进行安装。 ``` npm install element-plus ``` 2.在需要使用侧边栏的Vue文件中引入侧边栏组件。 ```javascript import { ElSidebar, ElMenu, ElMenuItem } from 'element-plus'; ``` 3.在Vue组件的模板中使用侧边栏组件。 ```html <template> <el-sidebar> <el...
我们已经使用vue3和elmentplus初步搭建了首页,上一篇中有个问题没解决,就是在侧边栏导航功能里,如果点击菜单希望是在首页打开页面而不是跳转到新页面。以下是我们希望实现的效果 这样的好处是用户在切换菜单的时候不需要离开当前页面,方便操作。本篇梳理一下实现的思路 ...
【vite+vue3+Ts+element-plus】肩并肩带你写后台管理之主页面开发(侧边栏菜单生成、标签栏开发) layout页面开发 侧边栏菜单开发 layout页面开发 我们先来看一下主页面长什么样子。 页面比较简单,主要分为左侧的菜单栏,顶部的导航栏(折叠左侧菜单,切换暗黑模式,员工账号名,退出登录),再下面的标签栏,之后就是主页面...
项目侧边栏主要基于element-plus的el-menu改造。 主要是有下面几个文件组成: Index.vue (主文件) SidebarItem.vue (侧边栏item定制,需要单独抽出来,多级路由嵌套需要它来递归) SidebarItemLink.vue (嵌套在SidebarItem 的上一层,区分外链和路由跳转) SidebarLogo.vue (侧边栏最上部的logo,可以隐藏和显示) ...