vue之element-ui侧边栏收缩

最新推荐文章于 2024-03-21 21:44:06 发布
最新推荐文章于 2024-03-21 21:44:06 发布
阅读量4.3k 收藏 4
点赞数 4
文章标签： vue js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41001446/article/details/106556124
版权

vue之element-ui admin 侧边栏收缩

参考 element ui 文档自己写了一下，新手勿喷！！！

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    .el-menu {
        border: none;
    }

    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
    }

    .el-header,
    .el-footer {
        background-color: rgb(255, 255, 255);
        color: #333;
        line-height: 60px;
        padding: 0 !important;
    }

    .el-header i {
        font-size: 24px;
    }

    .el-aside {
        background-color: rgb(61, 61, 61);
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        background-color: #f0f2f5;
        color: #333;
        text-align: center;
        line-height: 160px;
    }

    body>.el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }

    .icons {
        width: 25px;
        height: 60px;
        padding: 0 20px;
        text-align: center
    }

    .icons:hover {
        background: rgb(248, 248, 248);
        transition: 1s;
        cursor: pointer;
    }
</style>

<body>
    <div id="app">
        <el-container :style="{height: screenHeight + 'px' }">
            <el-menu background-color="#304156" text-color="#bfcbd9" active-text-color="#409eff" default-active="1"
                class="el-menu-vertical-demo" @close="handleClose" :collapse="isCollapse">
                <el-menu-item index="1">
                    <i class="el-icon-menu"></i>
                    <span slot="title">导航一</span>
                </el-menu-item>
                <el-submenu index="2">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span slot="title" >导航二</span>
                    </template>
                    <el-menu-item-group>
                        <span slot="title">分组一</span>
                        <el-menu-item index="3-1">选项1</el-menu-item>
                        <el-menu-item index="1-2">选项2</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="分组2">
                        <el-menu-item index="1-3">选项3</el-menu-item>
                    </el-menu-item-group>
                    <el-submenu index="1-4">
                        <span slot="title">选项4</span>
                        <el-menu-item index="1-4-1">选项1</el-menu-item>
                    </el-submenu>
                </el-submenu>
                <el-menu-item index="3">
                    <i class="el-icon-menu"></i>
                    <span slot="title">导航三</span>
                </el-menu-item>
                <el-menu-item index="4">
                    <i class="el-icon-document"></i>
                    <span slot="title">导航四</span>
                </el-menu-item>
                <el-menu-item index="5">
                    <i class="el-icon-setting"></i>
                    <span slot="title">导航五</span>
                </el-menu-item>

            </el-menu>
            <el-container>
                <el-header>
                    <div class="icons" @click="toggleCollapse">
                        <i class="el-icon-s-unfold" v-if="isCollapse"></i>
                        <i class="el-icon-s-fold"></i>
                    </div>

                </el-header>
                <el-main>

                </el-main>
            </el-container>
        </el-container>
    </div>
</body>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                isCollapse: true,
                screenHeight: window.innerHeight,
            };
        },
        methods: {
            toggleCollapse() {
                this.isCollapse = !this.isCollapse
            },
            handleClose() {

            },
        },
        mounted() {
            const that = this
            window.onresize = () => {
                return (() => {
                    window.screenWidth = document.body.clientWidth
                    that.screenWidth = window.screenWidth
                })()
            }
        }
    })
</script>

</html>
新手上路,请多指教
关注
  • 4
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
仿VS的伸缩侧边栏
05-17
仿VS的伸缩侧边栏
您的功能键在Chrome DevTools中的作用
culiyuan8310的博客
09-24 189
The function keys on keyboards don’t get the love they used to, but depending on the app you’re running, they can still be handy. Chrome DevTools has some interesting features tucked away behind your ...
elementui侧边栏的缩放
最新发布
2301_79872321的博客
03-21 244
我们使用 Element UI 提供的 el-aside 组件作为侧边栏，通过设置 collapsible 属性和监听 collapse 事件来实现侧边栏的展开和折叠功能。在 handleCollapse 方法中根据侧边栏的折叠状态来动态改变侧边栏的宽度。
vue递归element-ui可缩放侧边栏
weixin_43807553的博客
10-30 1169
el-side的递归调用 1.递归组件 这个在网上有许多，随便一搜就是 2.调用组件，并显示从服务器获取的json串 <template> <div class="aside"> <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;"> <el-radio-button :label="false">展开</el-radio-button>
elementui 可伸缩侧边栏_ElementUI 侧边栏伸缩布局
weixin_35187410的博客
12-23 4203
导航一选项1选项2Mainexport default {data() {return {isCollapse: true};},methods: {handleOpen (key, keyPath) {console.log(key, keyPath)},handleClose (key, keyPath) {console.log(key, keyPath)},toggleCollapse (...
elementui 可伸缩侧边栏_Vue 组件库Element布局容器动态生成侧边栏。
weixin_34042899的博客
01-26 2389
为了让大家可以继续看下去，代码展示效果我先给出来https://htmlzhoyan.github.io/ElementUi/#/ele/elc/%E6%9D%83%E9%99%90%E7%AE%A1%E7%90%86我这里要实现 Vue 2.0 的桌面端组件库Element中的侧边栏内容动态生成，换句话说，我并不知道侧边栏菜单里会有多少个子选项，所以我这样设计目录结构如下：vue布局我这边使用了...
elementui 可伸缩侧边栏_vue+elementui搭建后台管理界面(3侧边栏菜单)
weixin_42431713的博客
01-26 1604
上一节搭好了主框架，但是标签页和侧边栏只是分别展示了各自的菜单，如何将二者联动起来？定义路由规则：当有 children 属性时，从 children 里取出 path 填充到侧边栏，如：{path: ‘/‘,redirect: ‘/dashboard‘,name: ‘Container‘,component: Container,children: [{path: ‘dashboard‘, na...
vue2+element-ui,el-aside侧边栏容器收缩与展开源码
02-17
vue2+element-ui,el-aside侧边栏容器收缩与展开效果
vue-element-admin：基于vue，element-ui的后台系统，包含侧边栏权限过滤等常用组件
02-05
vue-cli + element-ui后台开发项目本项目不适合作为后台模板使用，仅作为后台解决方案的一种本方案模板页： 本地使用 // download files git clone https: //github.com/BiYuqi/vue-element-admin.git cd vue - ...
vue-admin-java：Spring启动+ mybatis + vue + element-ui实现后台管理API接口https：lmxdawn.github.iovue-admin-java
01-29
前言 ...项目JAVA前端地址： 项目JAVA首次地址： ...欢迎星 要求java8版本 ...动态侧边栏 广告管理 在线演示 （建议使用最新版Chrome浏览器） 捐 鼓励鼓励鼓励，重要的事情说三遍 执照 版权所有（c）2018 lmxdawn
vue-admin-webapp:基于vuejs + element-ui后台管理系统
03-09
vue-admin-webapp是一个后台管理系统，基于vuecli和element-ui ，使用fastmock来模拟数据，其中有图表，表格，权限，excel等，您可以根据自己的需求来添加路由。 安装 # 克隆项目 git clone git@github....
elementui-admin 整合动态侧边栏和按钮权限控制
04-29
elementui-admin 整合动态侧边栏和按钮权限控制e
element-ui tooltip修改背景颜色和箭头颜色的实现
01-19
本文介绍了element-ui tooltip修改背景颜色和箭头颜色的实现，分享给大家，具体如下： 分享 placement=left popper-class=draw_share_atooltip> <div class=iconfont></div> //箭头颜色 .el-tooltip__...
ElementUI 侧边栏伸缩布局
Cupid
10-15 2266
ElementUI 侧边栏伸缩布局 <template> <div id="home"> <el-container> <el-aside width="auto"> <div class="logo"></div> <el-menu class="el-...
【vue+ElementUI】实现NavMenu侧边导航栏的手动缩放功能-类似表格缩放功能
wuchus的博客
07-24 5195
利用鼠标的mousedown、mouseup和mousemove事件实现ElementUI侧边栏的手动缩放功能。
Element 侧边栏菜单伸缩 踩坑记录
qq_37866866的博客
07-14 1821
Element 侧边栏菜单伸缩 script css 组件 效果图 若是自定义菜单内容，请自行设置class处理吧，不同情况不同处理，此文章仅做记录！
vue---element实现收缩展开的侧边导航栏
热门推荐
maidu_xbd的博客
11-26 1万+
需求描述： 如下图，可收缩、可展开的侧边导航栏，当收缩时，鼠标悬停在一级菜单时，出现二级菜单。 解决方法： 设置标志【isCollapse】来控制展开和收缩图标的显示，当【isCollapse=true】时，侧标导航栏收缩，且标题“通讯录管理”不显示。当【isCollapse=false】时，侧标导航栏展开，且标题“通讯录管理”显示。 在展开和收缩...
element ui 侧边栏手动缩放
Fiona_lms的博客
06-09 332
element ui 侧边栏手动缩放
vuex结合elementUi实现收缩侧边栏
m0_56658629的博客
01-03 690
vuex
vue-element-admin侧边栏
05-09
Vue-element-admin 是一个基于 Vue.js 和 Element UI 的后台管理系统解决方案。它提供了许多常用的后台管理功能和组件，包括侧边栏、面包屑导航、表格、表单、图表等等。 侧边栏是 Vue-element-admin 中的一个重要组件，它通常用于展示系统的菜单和功能项。在 Vue-element-admin 中，侧边栏是通过路由配置来生成的。 在路由配置中，每一个路由配置项对应着一个菜单项。菜单项包括菜单的标题、图标、路径、子菜单等信息。当用户点击菜单项时，就会跳转到对应的路由页面。 以下是一个简单的示例，演示如何使用 Vue-element-admin 的侧边栏组件： ```javascript // 路由配置 const routes = [ { path: '/', redirect: '/dashboard' }, { path: '/dashboard', component: Layout, children: [ { path: '', name: 'Dashboard', component: () => import('@/views/dashboard/index'), meta: { title: 'Dashboard', icon: 'dashboard' } } ] }, { path: '/example', component: Layout, redirect: '/example/table', name: 'Example', meta: { title: 'Example', icon: 'example' }, children: [ { path: 'table', name: 'Table', component: () => import('@/views/table/index'), meta: { title: 'Table', icon: 'table' } }, { path: 'tree', name: 'Tree', component: () => import('@/views/tree/index'), meta: { title: 'Tree', icon: 'tree' } } ] } ] // 侧边栏组件 <template> <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" :collapse="isCollapse"> <template v-for="(item, index) in menuList"> <el-submenu v-if="item.children" :key="index" :index="index"> <template slot="title"> <i :class="item.icon"></i> <span slot="title">{{item.title}}</span> </template> <template v-for="(subItem, subIndex) in item.children"> <el-menu-item :key="index + '-' + subIndex" :index="index + '-' + subIndex" @click="handleMenuClick(subItem)"> <i :class="subItem.icon"></i> <span slot="title">{{subItem.title}}</span> </el-menu-item> </template> </el-submenu> <el-menu-item v-else :key="index" :index="index" @click="handleMenuClick(item)"> <i :class="item.icon"></i> <span slot="title">{{item.title}}</span> </el-menu-item> </template> </el-menu> </template> <script> export default { props: { menuList: { type: Array, required: true }, activeIndex: { type: String, required: true }, isCollapse: { type: Boolean, required: true } }, methods: { handleMenuClick(item) { this.$emit('menu-click', item) } } } </script> ``` 在这个示例中，路由配置包含了三个路由项，分别对应 Dashboard、Table 和 Tree 三个菜单项。侧边栏组件则使用了 Element UI 中的 Menu 组件来展示菜单项。侧边栏组件的主要作用是传递菜单项列表、当前选中的菜单项和侧边栏是否折叠等参数，以及监听菜单项的点击事件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值