精华内容
下载资源
问答
  • 2015-01-17 13:07:02

    (1)布局文件没有做更改

    (2)在res--menu目录下的main.xml文件中代码如下:

    <menu xmlns:android="http://schemas.android.com/apk/res/android" >
    
        <!-- 一级菜单 -->
        <item
            android:id="@+id/file"
            android:title="@string/file">
    
            <!-- 二级菜单 -->
            <menu>
                <item
                    android:id="@+id/create"
                    android:title="@string/create">
                </item>
                <item
                    android:id="@+id/open"
                    android:title="@string/open">
                </item>
            </menu>
        </item>
        <!-- 一级菜单 -->
        <item
            android:id="@+id/chioce"
            android:title="@string/chioce">
    
            <!-- 二级菜单 -->
            <menu>
                <item
                    android:id="@+id/create1"
                    android:title="@string/create">
                </item>
                <item
                    android:id="@+id/open1"
                    android:title="@string/open">
                </item>
            </menu>
        </item>
    
    </menu>

    (3)values目录下的string.xml文件中:

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
    
        <string name="app_name">Menu_submenu</string>
        <string name="action_settings">Settings</string>
        <string name="hello_world">Hello world!</string>
        <string name="file">文件</string>
        <string name="create">新建</string>
        <string name="open">打开</string>
        <string name="chioce">选项</string>
    
    </resources>

    (3)MainActivity.java代码如下:

    package com.example.menu_submenu;
    
    import android.os.Bundle;
    import android.app.Activity;
    import android.content.Intent;
    import android.view.Menu;
    import android.view.MenuItem;
    import android.view.SubMenu;
    import android.widget.Toast;
    
    public class MainActivity extends Activity {
    
    	@Override
    	protected void onCreate(Bundle savedInstanceState) {
    		super.onCreate(savedInstanceState);
    		setContentView(R.layout.activity_main);
    	}
    
    	@Override
    	public boolean onCreateOptionsMenu(Menu menu) {
    		// Inflate the menu; this adds items to the action bar if it is present.
    		getMenuInflater().inflate(R.menu.main, menu);
    		return true;
    	}
    
    	/*
    	 * 处理一级菜单
    	 */
    	@Override
    	public boolean onOptionsItemSelected(MenuItem item) {
    		switch (item.getItemId()) {
    		case R.id.file:
    			Toast.makeText(MainActivity.this, "一级菜单file..", Toast.LENGTH_SHORT)
    					.show();
    			break;
    		case R.id.chioce:
    			Toast.makeText(MainActivity.this, "一级菜单chioce..",
    					Toast.LENGTH_SHORT).show();
    			break;
    
    		default:
    			break;
    		}
    		return super.onOptionsItemSelected(item);
    	}
    
    	/*
    	 * 处理二级菜单的
    	 */
    	@Override
    	public boolean onMenuItemSelected(int featureId, MenuItem item) {
    		switch (item.getItemId()) {
    		case R.id.create1:
    			Toast.makeText(MainActivity.this, "处理二级菜单create1..",
    					Toast.LENGTH_SHORT).show();
    			break;
    		case R.id.open1:
    			Toast.makeText(MainActivity.this, "处理二级菜单create1..",
    					Toast.LENGTH_SHORT).show();
    			break;
    		case R.id.create:
    			Toast.makeText(MainActivity.this, "处理二级菜单create..",
    					Toast.LENGTH_SHORT).show();
    			break;
    		case R.id.open:
    			Toast.makeText(MainActivity.this, "处理二级菜单open..",
    					Toast.LENGTH_SHORT).show();
    			break;
    
    		default:
    			break;
    		}
    		return super.onMenuItemSelected(featureId, item);
    	}
    }
    


    更多相关内容
  • Vue项目菜单导航封装(一级菜单在上面,二级三级菜单在左侧),element-ui菜单导航封装

    效果图:

     

    第一步,封装上方水平一级菜单

    <template>
        <div class="wrapper">
            <!-- 页面头部部分 -->
            <div class="header">
                <div class="logo">后台管理系统</div>
                <!-- 水平一级菜单 -->
                <div style="float: left">
                    <el-menu :default-active="toIndex()" mode="horizontal" @select="handleSelect">
                        <template v-for="item in items">
                            <el-menu-item :index="item.index" :key="item.index">
                                <template slot="title">
                                    <span slot="title">{{ item.title }}</span>
                                </template>
                            </el-menu-item>
                        </template>
                    </el-menu>
                </div>
    
                <div class="header-right">
                    <div class="header-user-con">
                        <!-- 客服聊天 -->
                        <div style="cursor: pointer; font-size: 16px" @click="contact">联系客服</div>
    
                        <!-- 用户头像 -->
                        <div class="user-avator"><img src="../../assets/img/img.jpg" /></div>
                        <!-- 用户名下拉菜单 -->
                        <el-dropdown class="user-name" trigger="click" @command="handleCommand">
                            <span class="el-dropdown-link">
                                {{ username }}
                                <i class="el-icon-caret-bottom"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item disabled>修改密码</el-dropdown-item>
                                <el-dropdown-item command="loginout">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </div>
            </div>
    
            <!-- 页面左侧二级菜单栏,和主体内容区域部分 -->
            <el-main>
                <router-view></router-view>
            </el-main>
        </div>
    </template>
    
    <script>
    export default {
        data() {
            return {
                items: [
                    // 水平一级菜单栏的菜单
                    { index: 'Home', title: '首页' },
                    { index: 'hunter', title: '测试1' },
                    { index: 'job', title: '测试2' },
                    { index: 'system', title: '系统设置' }
                ]
            };
        },
        computed: {
            username() {
                let username = localStorage.getItem('ms_username');
                return username ? username : this.name;
            }
        },
        methods: {
            // 根据路径绑定到对应的一级菜单,防止页面刷新重新跳回第一个
            toIndex() {
                return this.$route.path.split('/')[1];
            },
            // 切换菜单栏
            handleSelect(index) {
                this.$router.push('/' + index);
            },
            // 用户名下拉菜单选择事件
            handleCommand(command) {
                if (command == 'loginout') {
                    localStorage.removeItem('ms_username');
                    this.$router.push('/login');
                }
            },
            // 联系客服
            contact() {
                this.$router.push('/contact');
            }
        },
        mounted() {}
    };
    </script>
    
    <style scoped>
    .wrapper {
        width: 100%;
        height: 100%;
        background: #f0f0f0;
    }
    .header {
        /* position: relative; */
        position: fixed;
        z-index: 999;
        box-sizing: border-box;
        width: 100%;
        height: 70px;
        font-size: 22px;
    }
    .header .logo {
        float: left;
        margin-left: 60px;
        margin-top: 17.5px;
        height: 29px;
        width: 160px;
        vertical-align: middle;
    }
    /* --------------- 用户头像区域的样式 ---------------- */
    .header-right {
        float: right;
        padding-right: 50px;
    }
    .header-user-con {
        display: flex;
        height: 70px;
        align-items: center;
    }
    .user-avator {
        margin-left: 20px;
    }
    .user-avator img {
        display: block;
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }
    .user-name {
        margin-left: 10px;
    }
    .el-dropdown-link {
        cursor: pointer;
    }
    .el-dropdown-menu__item {
        text-align: center;
    }
    /* --------------- 水平一级菜单栏的样式--------------------- */
    .el-menu.el-menu--horizontal {
        border-bottom: none !important;
        float: left;
        margin-left: 50px;
    }
    .el-menu--horizontal > .el-menu-item.is-active {
        border-bottom: 2px solid #409eff;
        color: #3989fa;
        font-weight: 700;
    }
    .el-menu--horizontal > .el-menu-item {
        font-size: 16px;
        margin: 0 15px;
        color: black;
    }
    </style>

    第二步,封装左侧二级,三级菜单导航

    <template>
        <!-- 二级、三级菜单封装 -->
        <div class="sidebar">
            <el-menu
                class="sidebar-el-menu"
                :default-active="toIndex()"
                s
                background-color="white"
                text-color="#7a8297"
                active-text-color="#2d8cf0"
                router
            >
                <div>
                    <el-submenu :index="index + ''" v-for="(list, index) in lists" :key="list.id">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>{{ list.title }}</span>
                        </template>
                        <template v-for="item in list.children">
                            <el-menu-item :index="item.index" :key="item.id" v-if="item">
                                <span slot="title">{{ item.title }}</span>
                            </el-menu-item>
                        </template>
                    </el-submenu>
                </div>
            </el-menu>
        </div>
    </template>
    
    <script>
    export default {
        props: ['lists'],
        data() {
            return {};
        },
        methods: {
            // 根据路径绑定到对应的二级菜单,防止页面刷新重新跳回第一个
            toIndex() {
                return this.$route.path.split('/')[2];
            },
            changepath(path) {}
        },
        mounted() {}
    };
    </script>
    
    <style scoped>
    /* 左侧菜单栏定位和位置大小设定 */
    .sidebar {
        display: block;
        /* position: absolute; */
        position: fixed;
        left: 0;
        top: 70px;
        bottom: 0;
        overflow-y: scroll;
    }
    .sidebar::-webkit-scrollbar {
        width: 0;
    }
    .sidebar-el-menu {
        width: 250px;
    }
    .sidebar > ul {
        height: 100%;
    }
    
    /* 左侧二级菜单项的样式 */
    .el-menu-item {
        font-size: 14px !important;
        padding-left: 35px !important;
        color: black !important;
    }
    
    /* 左侧二级菜单选中时的样式 */
    .el-menu-item.is-active {
        color: white !important;
        background: #3989fa !important;
    }
    .el-menu-item,
    .el-submenu__title {
        height: 50px !important;
        line-height: 50px !important;
    }
    </style>

    第三步,配置路由

    import Vue from 'vue';
    import Router from 'vue-router';
    
    Vue.use(Router);
    
    export default new Router({
        routes: [{
            path: '/',
            component: () => import('../components/common/Whole.vue'),
            meta: {
                title: '整体页面布局'
            },
            children: [{
                path: '/dashboard',
                component: () => import('../page/Dashboard.vue'),
                meta: {
                    title: '首页'
                },
                redirect: '/Home',     // 该配置是若点击选择父目录时,默认选中该父目录下的子路径页面
                children: [{
                    path: '/Home',
                    component: () => import('../page/Dashboard.vue'),
                    meta: {
                        title: '首页'
                    },
                }]
            },{
                // 国际化组件
                path: '/i18n',
                component: () => import('../components/common/I18n.vue'),
                meta: {
                    title: '国际化'
                }
            },
    
            {
                // 系统设置
                path: '/system',
                component: () => import('../page/system/index.vue'),
                meta: {
                    title: '系统设置'
                },
                redirect: '/system/menuManage',
                children: [
                    {
                        path: 'menuManage',
                        component: () => import('../page/system/menuManage.vue'),
                        meta: {
                            title: '菜单管理'
                        }
                    },
                    {
                        path: 'contentManage',
                        component: () => import('../page/system/contentManage.vue'),
                        meta: {
                            title: '内容管理'
                        }
                    },
                    {
                        path: 'roleManage',
                        component: () => import('../page/system/roleManage.vue'),
                        meta: {
                            title: '角色管理'
                        }
                    },
                    {
                        path: 'systemManage',
                        component: () => import('../page/system/systemManage.vue'),
                        meta: {
                            title: '系统设置'
                        }
                    },
                ]
            },
            {
                path: '/404',
                component: () => import('../page/404.vue'),
                meta: {
                    title: '404'
                }
            },
            {
                path: '/403',
                component: () => import('../page/403.vue'),
                meta: {
                    title: '403'
                }
            },
            ]
        },
        {
            // 登录页面
            path: '/login',
            component: () => import('../page/Login.vue'),
            meta: {
                title: '登录'
            }
        },
        {
            path: '*',
            redirect: '/404'
        }
        ]
    });

    第四步,在页面中应用

    <template>
        <div class="system">
            <!-- 一级菜单下面所拥有的二级菜单 -->
            <el-aside>
                <SideMenu :lists="lists"></SideMenu>
            </el-aside>
    
            <!-- 以及二级菜单所对应的页面 -->
            <el-main>
                <router-view></router-view>
            </el-main>
        </div>
    </template>
    
    <script>
    import SideMenu from '@/components/sidemenu/SideMenu';
    export default {
        components: {
            SideMenu
        },
        data() {
            return {
                lists: [
                    {
                        title: '菜单管理',
                        children: [
                            { index: 'menuManage', title: '菜单管理' },
                            { index: 'contentManage', title: '内容管理' },
                            { index: 'roleManage', title: '角色管理' }
                        ]
                    },
                    {
                        title: '系统管理',
                        children: [
                            {
                                index: 'systemManage',
                                title: '系统设置'
                            }
                        ]
                    }
                ]
            };
        }
    };
    </script>
    
    <style scoped>
    </style>

    展开全文
  • 实现顶部一级菜单和左侧二级菜单进行响应,选哪个一级菜单时,左侧菜单栏有相对应下的二级菜单,产生联动效果。然后选不同的二级菜单,主体内容区域展示对应内容。 二、效果图 三、具体操作实现 1、用 vue-...

    一、目的

    后台管理系统页面的整体结构如图:

    实现顶部一级菜单和左侧二级菜单进行响应,选哪个一级菜单时,左侧菜单栏有相对应下的二级菜单,产生联动效果。然后选不同的二级菜单,主体内容区域展示对应内容。

    二、效果图

     后台管理系统模板源码的 github 地址:https://github.com/hxhpg/vue-secondMenu-test

    三、具体操作实现

    1、用 vue-cli 创建的 Vue 项目后,自己再手动搭建项目的基本目录结构,如图:

    2、创建一个公共组件 Whole.vue 来实现整体页面结构的布局,通过 div 来进行区域定位和大小设定。

    使用 el-menu 组件的 mode 属性为 "horizontal" 来使导航菜单变更为水平模式。

    @select="handleSelect" 来切换不同的一级菜单展示不同的二级菜单栏和主体内容区域,用 router-view 通过路由来进行组件页面跳转,代码如下:

    <template>
      <div class="wrapper">
        <!-- 页面头部部分 -->
        <div class="header">
          <div class="logo">后台管理系统</div>
          <!-- 水平一级菜单 -->
          <div style="float:left;">
            <el-menu 
              mode="horizontal"
              text-color="#000000"
              active-text-color="#3989fa"
              :default-active="toIndex" 
              @select="handleSelect">
              <el-menu-item v-for="(item, index) in itemList" :index="item.path" :key="index">
                <span slot="title">{{ item.title }}</span>
              </el-menu-item>
            </el-menu>
          </div>
          
          <div class="header-right">
            <div class="header-user-con">
              <!-- 用户头像 -->
              <div class="user-avator">
                <img src="@/assets/img/img.jpg"/>
              </div>
              <!-- 用户名下拉菜单 -->
              <el-dropdown class="user-name" trigger="click" @command="handleCommand">
                <span class="el-dropdown-link"> {{ username }} <i class="el-icon-caret-bottom"></i></span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item disabled>修改密码</el-dropdown-item>
                  <el-dropdown-item command="loginout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </div>
    
        <!-- 页面左侧二级菜单栏,和主体内容区域部分 -->
        <el-main>
          <router-view></router-view>
        </el-main>
    
      </div>
    </template>
    
    <script>
    import bus from "@/utils/bus";
    export default {
      data(){
        return{
          itemList: [    // 水平一级菜单栏的菜单
            { path: '/Home', title: '首页' },
            { path: '/test1', title: '一级菜单1' },
            { path: '/test2', title: '一级菜单2' },
            { path: '/test3', title: '一级菜单3' },
            { path: '/permission', title: '管理员权限' },
            // { path: '/i18n', title: '国际化组件' }
          ],
        }
      },
      computed: {
        username(){
          return localStorage.getItem('ms_username') || '';
        },
        toIndex(){  // 根据路径绑定到对应的一级菜单,防止页面刷新重新跳回第一个
          return '/' + this.$route.path.split('/')[1];
        },
      },
      created() {
        
      },
      methods: {
        handleSelect(path){  // 切换菜单栏
          this.$router.push({
            path: path
          });
        },
        handleCommand(command){  // 用户名下拉菜单选择事件
          if(command == 'loginout'){
            localStorage.removeItem('ms_username');
            this.$router.push({
                path: '/Login'
            });
          }
        }
      }
    }
    </script>
    
    <style scoped>
    .wrapper {
      width: 100%;
      height: 100%;
      background: #f0f0f0;
    }
    .header {
      position: relative;
      box-sizing: border-box;
      width: 100%;
      height: 70px;
      font-size: 22px;
    }
    .header .logo {
      float: left;
      margin-left: 60px;
      margin-top: 17.5px;
      height: 29px;
      width: 160px;
      vertical-align: middle;
    }
    /* --------------- 用户头像区域的样式 ---------------- */
    .header-right {
      float: right;
      padding-right: 50px;
    }
    .header-user-con {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 70px;
    }
    .user-avator {
      margin-left: 20px;
    }
    .user-avator img {
      display: block;
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
    .user-name {
      margin-left: 10px;
    }
    .el-dropdown-link {
      cursor: pointer;
    }
    .el-dropdown-menu__item {
      text-align: center;
    }
    /* --------------- 水平一级菜单栏的样式--------------------- */
    .el-menu.el-menu--horizontal {
      border-bottom: none !important;
      float: left;
      margin-left: 50px;
      background: transparent;
    }
    .el-menu--horizontal > .el-menu-item.is-active {
      /* border-bottom: 2px solid #3989fa;
      color: #3989fa; */
      font-weight: bold;
    }
    .el-menu--horizontal > .el-menu-item {
      font-size: 16px;
      margin: 0 15px;
    }
    </style>

    3、这样就把页面顶部的一级菜单栏展现出来了。接下来要封装一个左侧二级菜单栏的组件 SideMenu.vue ,设定 props 是让调用该组件时把传递的值获取到。代码如下:

    <template>
      <!-- 左侧二级菜单栏的组件封装 -->
      <div class="sidebar">
        <el-menu
          class="sidebar-el-menu"
          :default-active="toIndex"
          background-color="#fff"
          text-color="#000000"
          router>
          <el-menu-item v-for="(item, index) in itemList" :key="index" :index="item.path">
            <!-- 需要图标的在 item 对象中加上属性 icon -->
            <!-- <i :class="item.icon"></i> -->
            <span slot="title">{{ item.title }}</span>
          </el-menu-item>
        </el-menu>
      </div>
    </template>
    
    <script>
    export default {
      props: {
        itemList: {
          type: Array,
          default: () => []
        }
      },
      data(){
        return {
    
        }
      },
      computed: {
        toIndex(){  // 根据路径绑定到对应的二级菜单,防止页面刷新重新跳回第一个
          return this.$route.path.split('/')[2];
        }
      },
      methods:{
          
      },
    }
    </script>
    
    <style lang="scss" scoped>
    /* 左侧菜单栏定位和位置大小设定 */
    .sidebar {
      display: block;
      position: absolute;
      left: 0;
      top: 70px;
      bottom: 0;
      overflow-y: scroll;
    }
    .sidebar::-webkit-scrollbar {
      width: 0;
    }
    .sidebar-el-menu {
      width: 250px;
    }
    .sidebar > ul {
      height: 100%;
    }
    
    /* 左侧二级菜单项的样式 */
    .el-menu-item{
      font-size: 14px !important;
      padding-left: 35px !important;
    }
    
    /* 左侧二级菜单选中时的样式 */
    .el-menu-item.is-active {
      color: white !important;
      background: #3989fa !important;
    }
    .el-menu-item, .el-submenu__title {
      height: 50px !important;
      line-height: 50px !important;
    }
    </style>

    4、然后在各个一级菜单下( 项目目录的 page 文件夹下的各个文件夹里的 index.vue )调用左侧二级菜单栏组件。

    每个 index.vue 会对应每个一级菜单,这个通过改变路径(@select="handleSelect")和对路由进行配置来实现跳转,通过组件之间的传值通信把二级菜单项传给左侧二级菜单栏的组件。

    再次用 router-view 通过路由来进行组件页面跳转(这样就形成两层嵌套,进行两次 router-view 路由跳转),index.vue 代码如下:

    <template>
      <div>
        
        <!-- 一级菜单下面所拥有的二级菜单 -->
        <el-aside>
          <SideMenu :itemList='itemList'></SideMenu>
        </el-aside>
        <!-- 以及二级菜单所对应的页面 -->
        <el-main>
          <router-view></router-view>
        </el-main>
    
      </div>
    </template>
    
    <script>
    import SideMenu from '@/components/sidemenu/SideMenu';
    export default {
      components: {
        SideMenu
      },
      data(){
        return{
          itemList: [
            { path: 'test1-1', title: '二级菜单1-1' },
            { path: 'test1-2', title: '二级菜单1-2' },
            { path: 'test1-3', title: '二级菜单1-3' },
            { path: 'test1-4', title: '二级菜单1-4' },
            { path: 'test1-5', title: '二级菜单1-5' }
          ]
        }
      }
    }
    </script>

    5、一二级菜单联动效果所需的组件和页面基本弄好了,最后得将这些都拼接起来走通,要对 vue-router 进行配置( router 文件夹下 index.js 文件),代码如下:

    import Vue from 'vue';
    import VueRouter from 'vue-router';
    
    Vue.use(VueRouter);
    
    const originalPush = VueRouter.prototype.push;
    VueRouter.prototype.push = function push(location) {
      return originalPush.call(this, location).catch(err => err);
    }
    
    export default new VueRouter({
      routes: [
        {
          path: '/',  // 程序启动默认路由
          component: () => import('@/components/common/Whole.vue'),
          meta: { title: '整体页面布局' },
          redirect: '/Home',  // 重定向到首页
          children: [
            {
              path: '/Home',
              component: () => import('@/page/Home.vue'),
              meta: { title: '首页' }
            },
            {
              path: '/test1',
              component: () => import('@/page/test1/index.vue'),
              meta: { title: '一级菜单1' },
              redirect: '/test1/test1-1',  // 该配置是若点击选择一级菜单时,默认选中并跳转到该一级菜单下的第一个二级菜单
              children:[
                {
                  path: 'test1-1',
                  component: () => import('@/page/test1/test1-1.vue'),
                  meta: { title: '二级菜单1-1' },
                },
                {
                  path: 'test1-2',
                  component: () => import('@/page/test1/test1-2.vue'),
                  meta: { title: '二级菜单1-2' },
                },
                {
                  path: 'test1-3',
                  component: () => import('@/page/test1/test1-3.vue'),
                   meta: { title: '二级菜单1-3' },
                },
                {
                  path: 'test1-4',
                  component: () => import('@/page/test1/test1-4.vue'),
                  meta: { title: '二级菜单1-4' },
                },
                {
                  path: 'test1-5',
                  component: () => import('@/page/test1/test1-5.vue'),
                  meta: { title: '二级菜单1-5' },
                }
              ]
            },
            {
              path: '/test2',
              component: () => import('@/page/test2/index.vue'),
              meta: { title: '一级菜单2' },
              redirect: '/test2/test2-1',     // 该配置是若点击选择父目录时,默认选中该父目录下的子路径页面
              children:[
                {
                  path: 'test2-1',
                  component: () => import('@/page/test2/test2-1.vue'),
                  meta: { title: '二级菜单2-1' },
                },
                {
                  path: 'test2-2',
                  component: () => import('@/page/test2/test2-2.vue'),
                  meta: { title: '二级菜单2-2' },
                },
                {
                  path: 'test2-3',
                  component: () => import('@/page/test2/test2-3.vue'),
                  meta: { title: '二级菜单2-3' },
                },
              ]
            },
            {
              path: '/test3',
              component: () => import('@/page/test3/index.vue'),
              meta: { title: '一级菜单3' },
              redirect: '/test3/test3-1',
              children:[
                {
                  path: 'test3-1',
                  component: () => import('@/page/test3/test3-1.vue'),
                  meta: { title: '二级菜单3-1' }
                },
                {
                  path: 'test3-2',
                  component: () => import('@/page/test3/test3-2.vue'),
                  meta: { title: '二级菜单3-2' }
                },
              ]
            },
            {
              path: '/i18n',  // 国际化组件
              component: () => import('@/components/common/I18n.vue'),
              meta: { title: '国际化' }
            },
            {
              path: '/permission',  // 权限页面
              component: () => import('@/page/Permission.vue'),
              meta: {
                title: '权限测试',
                permission: true
              }
            },
            {
              path: '/404',
              component: () => import('@/page/404.vue'),
              meta: { title: '404' }
            },
            {
              path: '/403',
              component: () => import('@/page/403.vue'),
              meta: { title: '403' }
            },
          ]
        },
        {
          path: '/Login',  // 登录页面
          component: () => import('@/page/Login.vue'),
          meta: { title: '登录' }
        },
        {
          path: '*',
          redirect: '/404'
        }
      ]
    });

    6、顶部一级菜单栏,左侧二级菜单栏的功能效果完成了,接下来就可以去开发具体的主体内容区域的页面了。例如 test1-2.vue 的代码如下:

    <template>
    <div class="content-box">
      <div class="container">
        <p>主体页面 1 - 2 </p>
        <div class="test-div">
          <i class="el-icon-edit"></i>
          <i class="el-icon-share"></i>
          <i class="el-icon-delete"></i>
        </div>
      </div>
    </div>
    </template>
    
    <script>
    export default {
      data(){
        return{
    
        }
      }
    }
    </script>
    
    <style>
    .test-div i{
      font-size: 25px;
    }
    </style>

    其中主体内容区域的定位和位置大小设定的 css 如下( 这些样式是公共,可复用的,单独写一个样式文件来全局引入使用 ):

    /* 页面主体部分 */
    .content-box {
      position: absolute;
      left: 250px;      /* 控制左侧二级菜单栏的宽度 */
      right: 0;
      top: 70px;
      bottom: 0;
      padding: 10px 20px;
      -webkit-transition: left .3s ease-in-out;
      transition: left .3s ease-in-out;
      background: #f0f0f0;
    }
    .content {
      width: auto;
      height: 100%;
      padding: 10px;
      overflow-y: scroll;
      box-sizing: border-box;
    }
    .content-collapse {
      left: 65px;
    }
    .container {
      padding: 20px;    /* 控制主体部分与主体边框的距离 */
      background: #fff;
      border: 1px solid #ddd;
      border-radius: 5px;
    }
    
    /* 表格栏样式 */
    .table-container {
      margin-top: 20px;
    }
    
    /* 分页栏样式 */
    .pagination-area {
      width: 100%;
      text-align: right;
      margin: 20px 0 10px 0;
    }
    
    /* 测试主体页面的 div 样式 */
    .test-div{
      margin: 15px;
    }

    整个后台管理系统模板的核心内容开发大致是这样的,更多具体细节可以下载完整的源码来看。

    项目实现了登录功能,一二级菜单联动选择展示不同的主体内容部分,封装了 axios 请求库,还简单配置了管理员和普通用户的权限区分。

    这是我本人在工作学习中遇到的问题,并对解决问题的方案进行了一次记录,跟小伙伴们分享出来哈 ~ 供参考学习,有什么建议也欢迎评论留言,转载请注明出处哈,感谢支持!


    后续扩展文章:

    Vue + ElementUI 后台管理系统实现主题风格切换_无解的菜鸟晖的博客-CSDN博客

    Vue + ElementUI 后台管理系统实现顶部一级菜单栏,左侧多级菜单栏(二级、三级等)_无解的菜鸟晖的博客-CSDN博客

    展开全文
  • 就是简简单单的一个小功能,鼠标移入侧边栏的一级菜单后,相对应的二级菜单显示。

    就是简简单单的一个小功能,鼠标移入侧边栏的一级菜单后,相对应的二级菜单显示。
    效果大概如图:
    当鼠标移动到“购物”时,显示右侧“详情3”

    CSS:

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .wrap {
            width: 150px;
            position: relative;
            margin: 10px 0 0 10px;
            background-color: #c0c0c0;
        }
        .wrapper {
            list-style: none;
            margin-left: 5px;
            height: 40px;
            line-height: 40px;
            cursor: pointer;
            position: relative;
        }
        .wrapper_a {
            text-decoration: none;
            color: #000000;
        }
        .wrap ul li a {
            display: inline-block;
            width: 100%;
            height: 100%;
        }
        .wrap ul li a:hover {
            color: #ffffff;
        }
        .details_wrap {
            width: 100px;
            height: 40px;
            line-height: 40px;
            background-color: #666666;
            position: absolute;
            left: 100%;
            top: 0;
            padding-left: 5px;
            list-style: none;
            display: none;
        }
        .details_wrap a {
            text-decoration: none;
            color: darkgrey;
        }
        .details_wrap a:hover {
            color: dimgray;
        }
    </style>

    HTML:

    <div class="wrap">
        <ul>
            <li class="wrapper">
                <a href="#" class="wrapper_a">居家</a>
                <ul>
                    <li class="details_wrap"><a href="#" class="details">详情1</a></li>
                </ul>
            </li>
            <li class="wrapper">
                <a href="#" class="wrapper_a">生活</a>
                <ul>
                    <li class="details_wrap"><a href="#" class="details">详情2</a></li>
                </ul>
            </li>
            <li class="wrapper">
                <a href="#" class="wrapper_a">购物</a>
                <ul>
                    <li class="details_wrap"><a href="#" class="details">详情3</a></li>
                </ul>
            </li>
            <li class="wrapper">
                <a href="#" class="wrapper_a">科普</a>
                <ul>
                    <li class="details_wrap"><a href="#" class="details">详情4</a></li>
                </ul>
            </li>
        </ul>
    </div>

    JS:

    <script src="../jquery-1.11.0.min.js"></script>
    <script>
        $(document).ready(function(){
            方法一:
            $(".wrapper").mouseover(function () {
                $(".details_wrap",this).show();
            }).mouseout(function () {
                $(".details_wrap",this).hide();
            });
    
            $(".details_wrap").mouseover(function () {
                $(".details_wrap",this).show();
            }).mouseout(function () {
                $(".details_wrap",this).hide();
            })
    
            方法二:
            $(".wrapper").mouseover(function () {							          $(this).find(".details_wrap").css('display','block');
            }).mouseout(function () {            $(this).find(".details_wrap").css('display','none');
            })
        })
    </script>

    不知道为啥,方法二的格式有错误,请自行调整。
    两只小菜鸟被这个搞了一下午,但依然存在很多疑问。比如,方法一中mouseover前为什么选择wrapper而不能是其他?
    请指教啊。

    另外,还有没有其他的方法?
    不吝赐教啊。

    展开全文
  •  设置一级菜单:hover效果显示二级菜单时,当鼠标从一级菜单移入二级菜单时,一级菜单因失去鼠标而导致二级菜单消失  根据一二级菜单DOM关系提出不同思路:  一级菜单包裹二级菜单   一级菜单 二级菜单
  • 一级菜单与二级菜单整理

    千次阅读 2018-03-21 14:19:37
    鼠标事件: 文字 其中的“menulayer_1”,可以自定义命名,一... 解决办法:首先:一级菜单包含二级菜单,标签中的display属性的值是不是block 2、注意块元素整体的设置属性有没有Z-index属性,改属性设置对象层叠顺序
  • dedecms首页调用一级级菜单

    千次阅读 2018-11-25 00:16:59
    调用指定id的栏目,不过只能调用个,要想多个调用就只能重复多次调用该标签 {dede:type typeid='栏目id'} <a href="[field:typeurl/]...第种:(没有二级菜单的调用)直接 <div id="navMenu"> <u...
  • html代码: <body> <div> <ul class="main"> <li class="nav"><a href="#">文创商户</a> <ul class="navcontent"> ...
  • 基于vue的后台管理系统实现顶部一级菜单,左侧二级及二级以下菜单 介绍 本人是在若依后台管理系统上修改的此功能 该功能实现的是顶部导航菜单和左侧导航菜单进行响应,产生联动效果,而左侧的菜单是根据router获取...
  • Vue Element Admin 添加一级菜单与页面

    千次阅读 2020-08-25 17:32:55
    2. 因为我们只做一级菜单,src/views/user 下面创建 index.vue 即可,模板写好。 name 名字尽量与模块名(文件名一致)。 开头字母大写,这样做是保持与原框架一致。 3. 根据需要写好页面。 4. 进入 src/...
  • 这样写有两个问题,1 点击一级菜单的文字,不会实现显示和隐藏。 2,点击二级菜单的li,也可以实现显示和隐藏。 正常情况应该是只有点击“我的收藏”,才会实现显示和隐藏。 求大神解答。。应该怎么写啊。。如果有...
  • html 二级菜单

    千次阅读 2019-11-12 20:12:24
    先放效果图: 首先设置菜单的基本轮廓 <div id="nav"> <ul> <...一级菜单1</a></li> <li><a href="#">一级菜单2</a></li> <li>...
  • 级菜单

    千次阅读 2021-04-21 19:03:19
    当鼠标移动到一级菜单时,其对应的二级菜单自动展开 下面我们来看具体的代码: <div class="menu-box"> <ul> <li> <a href="#">首页</a> </li> <li> <a...
  • 一、目的 接之前的一篇博客文章,https://blog.csdn.net/weixin_41856395/article/details/110441057 Vue + ElementUI 后台管理系统实现顶部一级菜单栏,左侧二级菜单栏。
  • 鼠标经过一级菜单时,弹出下拉菜单;希望的是:鼠标移出一级菜单并且鼠标不在二级菜单悬停时,下拉菜单消失; 那么就设置4个事件: 对于一级菜单:onmouseover和onmouseout 对于二级菜单:onmouseover和...
  • 主要是把逻辑搞清楚,实现起来容易了,主要思路就是把当前选中与上次选中做对比,使用了多选multiply属性,这个属性下,选中的数据结构为:一级为length1的数组,二级为length2的数组 <el-cascader class=...
  • ant design pro 添加一级菜单和子菜单

    千次阅读 2018-11-15 18:10:57
    1.新建个文件,我这个是复制其它自带的文件(list文件夹的TableList.js) 2.然后找到这个文件 去配router 3.也是copy其它的,就是改一下名字和路径文件...左边分享个公众号,写一些散文和影评等。    ...
  • 自己在写项目的时候,写到菜单栏,发现只有一级菜单的时候,切换一级菜单的图标高亮很容易,但是在一级菜单下还有二级菜单的时候,点击二级菜单时,一级菜单的图标不能实现高亮。了解了一下发现el-menu没有这个功能...
  • DIV+CSS制作二级菜单(横排二级下拉菜单)以及二级菜单出现错位解决方法
  • AXURE8.0制作二级菜单和三级菜单

    千次阅读 2019-08-11 15:27:31
    Axure 二级菜单级菜单
  • //创建右键菜单 ...//添加一级菜单 ToolStripMenuItem R_Add=new ToolStripMenuItem("添加一级菜单"); //绑定点击事件 R_Add_Click点击事件自己写一下 R_Add.Click += R_Add_Click; //创建R_A...
  • 实现一级菜单二级菜单:
  • html、css 实现二级菜单

    千次阅读 多人点赞 2019-12-11 17:14:25
    利用html、css 实现二级菜单,一级菜单用浮动,二级菜单用定位
  • 一级下拉菜单通常情况下制作有两种,一种是直接输入文本,另外一种是选择其他单元格的值。 第一种:直接输入文本。 操作方法:选中要制作下拉菜单的单元格区域,单击【数据】-【数据验证】-【序列】,在来源里面...
  • ``` ('ones');">通俗小说 武侠小说 言情小说 奇幻小说 </ul> ('twos');">文学园地 诗词歌赋 散文杂文 四书五经 ('threes');">历史轶事 ...
  • 一级菜单: 1,登录系统 2,系统设置 3,退出 二级菜单: 1,注册 2,登录 3,返回上一级菜单 当我在选择一级菜单中的登录系统1进入二级菜单,然后选择1注册成功后再选择2登录进行密码匹配,(1)我现在密码匹配成功...
  • 难点在于每一行菜单的层级不一样,如一级和二级菜单,所以值的获取在我们想来会比较麻烦,但是elementUI已经封装好了这种方法,实现起来非常方便 结论:将node传进来,根据返回的数据直接渲染在页面上就好啦。 ...
  • css实现二级菜单

    万次阅读 多人点赞 2019-03-03 23:30:10
    2.为了防止导航栏下面的banner图或内容盖住二级菜单,需要给导航栏定位, 来提高二级菜单的层级 3.定位之后,二级菜单的宽将不再继承它父元素的宽,需要重新定义,否则它将被内容撑开 &lt;!DOCTYPE html&gt;...
  • HTML制作二下拉菜单的方法步骤

    千次阅读 2021-07-01 03:45:40
    网络上的各种网页,二下拉菜单非常常见,那么HTML中怎样制作二下拉菜单呢?工具/材料hbuilder操作方法01如图,先书写个div标签,并且给这个div标签添加个id。02然后在div里面嵌套个p标签,p标签里面放置了个...
  • html二级菜单的创建

    千次阅读 2019-06-02 20:11:07
    级菜单用的是无序列表嵌套,:hover鼠标悬浮其上方发生的事 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 324,923
精华内容 129,969
关键字:

一级菜单什么意思

友情链接: SkyDome.rar