vue-element-admin 左侧菜单增加可拉伸收缩

有时候左侧菜单项名称太长导致会出现滚动条或者不用滚动条，直接加title.,体验不太好，想增加一个手动拖动拉伸收收缩的功能

slidebar增加拖拽点

增加id 为split-panel的布局。且设置isCollapse为true的时候，即只有打开的时候才可以进行拖拽

split-panel样式：

#split-panel {cursor: col-resize;height: 100%;width: 5px;position: absolute;top: 0;right: 0;
}

增加split-panel：

<template><div :class="{ 'has-logo': showLogo }"><logo v-if="showLogo" :collapse="isCollapse" /><el-scrollbar wrap-class="scrollbar-wrapper"><el-menu:default-active="activeMenu":collapse="isCollapse":background-color="variables.menuBg":text-color="variables.menuText":unique-opened="false":active-text-color="variables.menuActiveText":collapse-transition="false"mode="vertical"><sidebar-itemv-for="route in permission_routes":key="route.path":item="route":base-path="route.path"/></el-menu></el-scrollbar><!-- 拖拽点 --><div v-show="!isCollapse" id="split-panel"></div></div>
</template>

增加动态style

<sidebar class="sidebar-container" :style="{ width: barWidth }" />

<div:class="[hasTagsView ? 'hasTagsView' : 'noTagsView']"class="main-container":style="{ 'margin-left': barWidth }">// app-main...省略</div>

增加计算属性barWidth

computed:{barWidth() {if (!this.sidebar.opened) {//关闭时，右侧内容主题left设置为默认的54return '54px'} else {return `${this.sideBarDefaultWidth}px`}}
}

监听拖拽点

 moveSlideBar: function() {let _this = thislet splitPanel = document.getElementById('split-panel')splitPanel.onmousedown = function(e) {splitPanel.style.background = '#409eff'let startX = e.clientXdocument.onmousemove = function(e) {let endX = e.clientXlet moveLen = startX - endXstartX = endX// 设置拖动幅度_this.sideBarDefaultWidth -= moveLen}document.onmouseup = function() {// 重置sliptesplitPanel.style.background = ''document.onmousemove = nulldocument.onmouseup = null}return false}}

千里之行
始于足下

vue-element-admin 左侧菜单增加可拉伸收缩相关推荐

vue element html左侧菜单,vue生成element左侧菜单
首先来总结element ui 官方文档的左侧菜单结构,带有el-submenu为子级节点,el-menu-item表示没有下级.当然,菜单不能写死,因为菜单也许不止两级,所以我们需要递归来实现.根据 ...
Vue Element Admin 使用mock模块模拟数据
Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路.通过预先跟服务器端约定好的接口,模拟请求数据甚至逻辑,能够让前端开发更加独立自主,不会被服务端的开发所阻塞. vue-elem ...
vue+element+admin（初始化项目）
2022.10.17我接触到了vue+element+admin的使用,首先要安装node.jshttps://nodejs.org/zh-cn/download/.和githttps://git-s ...
vue element admin登录方式切换（密码登录或短信登录）
显示结果: 具体代码可以根据vue element admin源码进行更改,下面是页面代码 <el-form ref="loginForm" :model="log ...
vue首页导航+左侧菜单
目录 1. Mock.js:是什么? 2. Mock.js使用步骤 3. 后台首页AppMain.vue的创建 1. Mock.js:是什么? 1,前后端分离之后,前端迫切需要一种机制,不再需要依赖 ...
vue + element 顶部二级菜单_揭秘vue/react组件库中5个quot;作者不造的轮子quot;
点击上方"前端公虾米"关注最新前端资讯来源: 铁皮饭盒https://juejin.im/post/5d89cd156fb9a06acb3ee19e ? 这五个轮子其实是5个纯j ...
基于vue+element实现多级菜单动态生成
使用element的NavMenu组件+vue的组件递归实现动态生成菜单. 首先创建对象记录菜单的标题.链接.子集等信息. menus: [{title: "首页",icon: & ...
后端使用SpringBoot和Jwt工具与Redis数据库+前端Vue Element Admin实现用户携带token的登录功能案例
登录功能描述: 前端输入对应的用户信息 ,在用户输入邮箱后点击发送按钮给邮箱发送验证码,拿取到验证填完之后,点击登录按钮给后端发送请求 ,后端接收到请求之后 ,第一步校验验证码,第二步校验用户名和密 ...
Vue Element Admin 添加侧边栏以及他的页面
1. 在 /src/views/ 下添加需要的页面 2. 配置路由器 router 中的路由表 routes,分为 constantRoutes 和 asyncRoutes. 将路由的配置信息添加进路 ...

vue-element-admin 左侧菜单增加可拉伸收缩

目录

slidebar增加拖拽点

增加动态style

增加计算属性barWidth

监听拖拽点

vue-element-admin 左侧菜单增加可拉伸收缩相关推荐

最新文章

热门文章