精华内容
下载资源
问答
  • 主要介绍了element 中 el-menu 组件的无限极循环,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 适用于react-native的iOS14 + UIMenu组件。对于iOS14以下的版本,请回到ActionSheet。 iOS 14以上 iOS 13 安装 通过npm: npm install @react-native-menu/menu 通过纱线: yarn add @react-native-menu/menu 在...
  • ElmentUI的NavMenu组件动态封装 使用递归的方式动态渲染subMenu和menu_item ps: 这是一个问题贴 父组件
  • 继续研究vue组件vue-menu组件

    千次阅读 2019-01-27 21:44:55
    其实这个很简单,出发点就是想做一个点击切换的功能 原生html+css+js代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="...

    其实这个很简单,出发点就是想做一个点击切换的功能
    在这里插入图片描述
    原生html+css+js代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .nav-mobile-button {
            position: relative;
            float: left;
            padding: 9px 10px;
            margin-top: 8px;
            margin-right: 15px;
            margin-bottom: 8px;
            background-color: transparent;
            background-image: none;
            border: 1px solid transparent;
            outline: none;
            border-radius: 4px;
        }
        .nav-mobile-button .same:nth-child(1){
            margin-top: 0; 
        }
        .nav-mobile-button .same {
            display: block;
            margin-top: 4px;
            width: 22px;
            height: 2px;
            background: rgb(63
    展开全文
  • vue+element实现menu组件

    2019-07-25 15:11:45
    用elementUI做的一个左侧菜单展示,直接上代码: <template> <div class=""> ...el-menu class="menuLen" v-for="( item1 ,index1 ) in menuList" :unique-opened=true :router=tr...

    用elementUI做的一个左侧菜单展示,直接上代码:

    <template>
        <div class="">
          <!-- 一级菜单循环-->
          <el-menu class="menuLen" v-for="( item1 ,index1 ) in menuList" :unique-opened=true  :router=true :default-active="defaultActive" :key="index1" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
            <el-submenu :index='toSting(index1)' v-if="item1.permission">
              <template slot="title">
                <i :class="[item1.icon]" ></i>
                <span slot="title">{{ item1.name }}</span>
              </template>
              <!-- 二级菜单循环 -->
              <div  v-for="( item2 ,index2 ) in item1.childList" :key="index1+'-'+index2" >
                <div v-if="item2.permission">
                  <el-submenu :index="toSting(index1,index2)">
                    <span slot="title">{{ item2.name }}</span>
                    <!-- 三级菜单循环 -->
                    <div v-for="( item3 ,index3 ) in item2.childList" :key="index1+'-'+index2+'-'+index3">
                      <el-menu-item :index="item3.path">{{ item3.name }}</el-menu-item>
                    </div>
                  </el-submenu>
                </div>
                <div v-else="item2.permission">
                  <el-menu-item :index="item2.path">{{ item2.name }}</el-menu-item>
                </div>
              </div>
            </el-submenu>
            <el-menu-item :index='item1.path'  v-else="item1.permission">
              <i :class="[item1.icon]"></i>
              <span slot="title">{{ item1.name }}</span>
            </el-menu-item>
          </el-menu>
          <div class="menuBtn" @click="menuClick">
            <i :class="shrinkIcon" ></i>
          </div>
        </div>
    </template>  
    
    <script type="text/ecmascript-6" >
    
      import axios from 'axios';
      export default {
          name: "Menu",
          components: {
    
          },
          data(){
              return {
                menuList:'',
                isCollapse: true,
                shrinkIcon:'fa fa-angle-double-right'
              }
          },
          computed: {
          //获取当前路由渲染页面菜单
            defaultActive() {
              return this.$route.path;
            }
          },
          mounted() {
            this.getMenuList();
          },
          methods: {
            menuClick(){
              if( this.isCollapse ){
                this.isCollapse = false
                this.shrinkIcon = "fa fa-angle-double-left"
              }else {
                this.isCollapse = true
                this.shrinkIcon = "fa fa-angle-double-right"
              }
            },
            handleOpen(key, keyPath) {
              console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
              console.log(key, keyPath);
            },
            getMenuList:function(){
              var This=this;
              axios.get("../static/data/menu.json", {}).then(function (response) {
                This.menuList = response.data.list;
              })
            },
            toSting:function(...arg){
              let str='';
              for( var i=0;i<arg.length;i++ ){
                str += String( arg[i] ) + '-';
              }
              if( arg.length>0 ){
                str = str.substr(0, str.length-1);
              }
              return str;
            }
          }
      }
    </script>
    
    <style lang="scss" rel="stylesheet/scss" scoped>
      /deep/ .el-submenu__title,.el-menu-item{
        border-bottom: 1px solid #e5e5e5;
        padding: 1px;
        height: 45px;
        line-height: 40px;
        border-left: 3px solid #f9f9f9;
        padding-left: 10px !important;
      }
      /deep/ .el-menu{
        padding: 0 !important;
        background-color: #f9f9f9;
      }
      .el-menu-item{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .menuLen:not(.el-menu--collapse) {
        width: 200px;
      }
      .el-menu--collapse{
        width: 48px;
      }
      /deep/ .el-submenu__title:hover,.el-menu-item:hover{
        border-left: 3px solid #3382af;
      }
      .el-menu-item:focus, .el-menu-item:hover{
        background-color: #FFFFFF;
        border-left: 3px solid #3382af;
      }
      /deep/ .el-tooltip{
        padding: 0 !important;
        padding-left: 10px !important;;
      }
      .menuBtn{
        line-height: 24px;
        height: 26px;
        text-align: center;
        font-size: 18px;
        position: relative;
        i{
          font-size: 14px;
          padding:0 4px;
          display: inline-block;
          position: relative;
          cursor: pointer;
          border: 1px solid #bbb;
          border-radius: 45%;
          color: #aaa;
          vertical-align: baseline;
          background-color: #FFFFFF;
          z-index: 10;
        }
      }
      .menuBtn:before{
        content: "";
        display: inline-block;
        height: 0;
        border-top: 1px solid #e0e0e0;
        position: absolute;
        left: 8px;
        right: 8px;
        top: 14px;
      }
      .el-menu{
        border-right: none;
      }
      .el-menu-item i{
        margin: 0;
        vertical-align: middle;
        width: 24px;
        text-align: center;
      }
    </style>
    

    最后是json数据样式

    {
      "status": "0",
      "key2": "value2",
      "list": [
        {
          "name": "dashboard",
          "path":"dashboard",
          "icon": "fa fa-dashboard",
          "id":"1",
          "permission":false,
          "childList":[]
        }, {
          "name": "第二章节",
          "path":"index/main2",
          "icon": "el-icon-s-goods",
          "permission":true,
          "id":"2",
          "childList":[{
            "name": "第二章节-第一小节",
            "icon": "el-icon-upload",
            "permission":true,
            "path":"main2_1",
            "id":"21",
            "childList":[{
              "name": "第二章节-第一小节-第一小节",
              "icon": "el-icon-location",
              "path":"main2_1_1",
              "permission":false,
              "id":"21",
              "childList":[]
            },{
              "name": "第二章节-第一小节-第二小节",
              "icon": "el-icon-location",
              "path":"main2_1_2",
              "permission":false,
              "id":"22",
              "childList":[]
            }]
          },{
            "name": "第二章节-第二小节",
            "icon": "el-icon-upload",
            "path":"main2_2",
            "permission":true,
            "id":"21",
            "childList":[{
              "name": "第二章节-第二小节-第一小节",
              "path":"main2_2_1",
              "icon": "el-icon-location",
              "permission":false,
              "id":"21",
              "childList":[]
            }]
          },{
            "name": "第二章节-第三小节",
            "icon": "el-icon-location",
            "path":"main2_3",
            "permission":false,
            "id":"22",
            "childList":[]
          }]
        }
      ]
    }
    
    

    展示效果如下:
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • 一开始对el-menu组件不熟悉,仔细学习后积攒了一点经验,现记录下。 一、各组件介绍:el-menu组件主要包括三个组件,el-menu、el-menu-item-group和el-menu-item 其中el-menu是最外层组件。el-menu-item-group是组件...

    一开始对el-menu组件不熟悉,仔细学习后积攒了一点经验,现记录下。
    一、各组件介绍:el-menu组件主要包括三个组件,el-menu、el-menu-item-group和el-menu-item
    其中el-menu是最外层组件。el-menu-item-group是组件组el-menu-item-group可包含el-menu-item以及模板插槽。el-menu-item是组件元素。
    二、基本使用:el-menu-item可直接在el-menu中使用
    在这里插入图片描述
    此时显示为在这里插入图片描述
    el-menu-item也可插入元素,如在这里插入图片描述
    此时显示在这里插入图片描述

    el-menu-item-group是指一次插入多个el-menu-item

    展开全文
  • Java Swing的三个比较重要的组件,菜单组件,JTable组件,JTree组件,写了简单的测试例子,供大家参考
  • element 中 el-menu 组件的无限极循环

    千次阅读 2020-05-22 09:39:41
    实现思路主要组件嵌套(组件自己调用自己)  下面是组件所需要的数据 { "code": 1, "data": { "menuVoList": [ { "childList": [ ... "menu": { "createBy": "0-1", "createTime": 1587610158, .

    实现思路主要组件嵌套(组件自己调用自己)

      下面是组件所需要的数据

    {
      "code": 1,
      "data": {
        "menuVoList": [
          {
            "childList": [
              {
                "childList": [],
                "menu": {
                  "createBy": "0-1",
                  "createTime": 1587610158,
                  "id": "2f006aed6a114579bd8b9809724428f7",
                  "name": "系统用户权限管理",
                  "parentId": "6d68079a16b94292990f612237bd048e",
                  "path": "/userallotrole",
                  "updateBy": "0-1",
                  "updateTime": 1587610221
                }
              },
              {
                "childList": [],
                "menu": {
                  "createBy": "0-1",
                  "createTime": 1587605059,
                  "id": "c948265cdf27420eb7b6b502292c5990",
                  "name": "系统用户管理",
                  "parentId": "6d68079a16b94292990f612237bd048e",
                  "path": "/user",
                  "updateBy": "0-1",
                  "updateTime": 1587610230
                }
              }
            ],
            "menu": {
              "createBy": "0-1",
              "createTime": 1587605025,
              "id": "6d68079a16b94292990f612237bd048e",
              "name": "用户管理",
              "parentId": "",
              "path": "/#",
              "updateBy": "0-1",
              "updateTime": 1587610117
            }
          },
          {
            "childList": [
              {
                "childList": [],
                "menu": {
                  "createBy": "0-1",
                  "createTime": 1587469457,
                  "id": "d4b70897052742bb860cf14cea8cf131",
                  "name": "新建/修改菜单",
                  "parentId": "82e5ca1ab2e04d8faffeb973286771ec",
                  "path": "/newMenu",
                  "updateBy": "0-1",
                  "updateTime": 1587469457
                }
              }
            ],
            "menu": {
              "createBy": "0-1",
              "createTime": 1587469385,
              "id": "82e5ca1ab2e04d8faffeb973286771ec",
              "name": "菜单管理",
              "parentId": "",
              "path": "",
              "updateBy": "0-1",
              "updateTime": 1587469426
            }
          },
          {
            "childList": [
              {
                "childList": [],
                "menu": {
                  "createBy": "0-1",
                  "createTime": 1587468494,
                  "id": "3a092edd120d40b79322d8486e53e5a1",
                  "name": "系统角色管理",
                  "parentId": "ce5704f647d341fe8334ad12c6dd4a6b",
                  "path": "/setrole",
                  "updateBy": "0-1",
                  "updateTime": 1587469340
                }
              },
              {
                "childList": [],
                "menu": {
                  "createBy": "0-1",
                  "createTime": 1587469360,
                  "id": "61d0e4fecbed407d89b1ea5878072374",
                  "name": "设置角色权限",
                  "parentId": "ce5704f647d341fe8334ad12c6dd4a6b",
                  "path": "/authorization",
                  "updateBy": "0-1",
                  "updateTime": 1587469360
                }
              },
              {
                "childList": [],
                "menu": {
                  "createBy": "0-1",
                  "createTime": 1587469520,
                  "id": "a1a2f6bcbfba4a7f9178ef03ea0fe5b0",
                  "name": "权限管理",
                  "parentId": "ce5704f647d341fe8334ad12c6dd4a6b",
                  "path": "/resource",
                  "updateBy": "0-1",
                  "updateTime": 1587624251
                }
              }
            ],
            "menu": {
              "createBy": "0-1",
              "createTime": 1587468417,
              "id": "ce5704f647d341fe8334ad12c6dd4a6b",
              "name": "角色管理",
              "parentId": "",
              "path": "",
              "updateBy": "0-1",
              "updateTime": 1587468417
            }
          }
        ]
      },
      "message": "成功"
    }

    现在我们来设置组件 (在 componet 文件夹里面建一个 menu.vue) 代码如下

    <template>
      <div>
        <template v-for="value in menuData">
          <el-submenu v-if="value.childList.length > '0'" :index="value.menu.name"> //判断传进来的数据中 childList 数组length 是否大于零, 如果大于零表示 不是不需要在循环下去了
            <template slot="title">
              <i class="el-icon-s-tools" />
              <span slot="title">{{ value.menu.name }}</span>
            </template>
            <MenuTree :menu-data="value.childList" />
          </el-submenu>
          <el-menu-item v-else :index="value.menu.path">
            <span slot="title">{{ value.menu.name }}</span>
          </el-menu-item>
        </template>
      </div>
    </template>
    <script>
    export default {
      name: 'MenuTree',
      props: ['menuData']
    }
    </script>
    <style lang="scss" >
    .el-submenu__title i {
      color: #fff;
    }
    .el-menu--collapse {
      width: 54px;
    }
    </style>

     接下来 在需要使用 menu 组件的地方引入刚才定义的组件

    <template>
          <el-menu
            class="el-menu-vertical-demo"
            :collapse="isCollapse"
            background-color="#4A5A74"
            active-text-color="#ffd04b"
            text-color="#fff"
            :unique-opened="true"
            :default-active="this.$route.path"
            @select="handleSelect"
          >
            <menuTree :menu-data="list" />
          </el-menu>
    </template>
     
    import menuTree from '@/component/menu'
    export default{
      components: {
        menuTree
      },
    data: {
       list: [] 
    },
    methods: {
          getMenuList({}).then(res => { //我这里是请求后台得来得数据,没有数据直接用我上面得数据,不过得像我下面这样处理
            if (res.status === 200) {
              this.list = res.data.data.menuVoList
            }
          })
    }
    }

      这样,em-menu 组件的无限极循环便实现了,注意,我 上面代码中 el-menu 的属性可能多了一些,请根据自己需要删除

    展开全文
  • 基于antd的Menu组件实现菜单查询

    千次阅读 2019-08-13 17:15:00
    const menu = this.flatMapMenus(menuData).flat(Infinity).filter(menu => menu.id == item.parent.id); list.push(this.checkParentMenu(menu.length > 0 ? menu[0] : null, str)); } } } return list; } ...
  • 目录,就是react-component下的menu组件。先搜索文件夹内搜索 builtinPlacements 这个词,看下哪几个地方用到了。发现如下: rc-menu/es/submenu.js ... var builtin Placements = props.builtinPlacements; .....
  • ant design Menu组件子菜单样式设置

    千次阅读 2020-09-11 09:40:21
    ant design Menu组件子菜单样式设置 Menu二级子菜单宽度较宽,直接设置width不起作用,会被他自带的min-width覆盖 解决办法:设置组件的全局样式,提升优先级,如下所示: <style lang="less"> // 设置菜单项...
  • Angular Material Menu 组件

    千次阅读 2017-10-05 13:04:54
    menu
  • menu组件只有dark与light两种主题吗 我如何换一种颜色呢,谢谢(*°∀°)=3
  • element DropdownMenu组件(宫本特款)

    千次阅读 2018-07-12 15:29:12
    DropdownMenu 排好队,一个一个来 component / dropdownMenu.vue &lt;template&gt; &lt;div class="share-dropdown-menu"&gt; &lt;span class="share-dropdown-menu-...
  • vue Menu组件当前展开时其他收起

    千次阅读 2019-08-08 10:47:18
    Menu/>写上就能了,剩下的就是跳转问题了,我是直接写了一个方法@on-select="changeMenu"把name值传过去,然后跳转就解决了 <Menu :active-name="$route.name" theme="light" ref="child" accordion ...
  • 先上代码,格式加了空行,方便看结构:(前期模板组件的导入和注册都略过了) <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#
  • el-menu router :default-active="$route.path" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" theme="dark"> <el-submenu index="1"> <templa...
  • 2. 给导航栏menuItem添加自定义高亮样式(如 class="xmj-menu-active"),不要用iview的menu组件的默认高亮类(目前没有找到使用默认高亮类名 ".ivu-menu-item-active.ivu-menu-item-selected" 时候的解决方法);...
  • 主要介绍了Element-Ui组件 NavMenu 导航菜单的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • React菜单组件可轻松快速地进行Web开发。 无限级别的子菜单。 支持单选和复选框菜单项。 支持上下文菜单。 灵活的菜单定位。 可定制的样式。 全面的键盘交互。 遵守。 安装 # with npm npm install @szhsin/...
  • menu组件的高亮部分反映的是当前的页面,但是当前页面会跳转到另外一个页面,相应的高亮部分也应该随着跳转。menu组件中有一个active-name反映的是当前高亮区域,因此可以动态的绑定active-name,来实现目的。 参考...
  • [Vue warn]: Error in beforeDestroy hook: "TypeError: Cannot read property '$parent' of null" ![图片说明](https://img-ask.csdn.net/upload/202001/21/1579600847_106938.png)
  • 安装npm i @ innologica / vue-dropdown-menu-保存或毛线添加@ innologica / vue-dropdown-menu import可以使用:import来自'@ innologica / vue-dropdown-menu'演示的DropdownMenu演示演示和文档位于...
  • 看过Element-UI的导航菜单组件的文档的同学应该了解到文档的demo都是有限级的菜单,然而现实场景业务通常有可能是这样子: (1)菜单由后台接口返回; (2)前端写死,但是业务需求是...(1)父组件menu.vue // ...
  • iview menu组件on-select增加额外参数

    千次阅读 2019-01-16 09:17:20
    Menu mode="horizontal" :active-name="currentFirstMenu" @on-select="(key) => openSaveTip(key, 'first')"> </Menu> 复制代码如上面代码所示用闭包实现额外参数 openSaveTip(data, type) { console...
  • 动态渲染 Element UI el-menu 组件

    万次阅读 2019-01-08 22:23:16
    相信大家在使用 Element UI 中 el-menu 组件的时候,都碰到过如何通过数据动态渲染的问题,而官方的文档却没有这个实例,网上找的一些博客大部分人都实现了 el-menu 的垂直模式,而水平模式却没有,并且垂直模式的 ...
  • Ionic4中使用ion-menu组件创建侧边栏。Ionic CLI提供了侧边栏模板项目以供下载,命令如下所示。 > ionic start myApp sidemenu Ionic4中有两种类型的侧边栏。其一,定义在根模块中的侧边栏,即全局...
  • vant组件库-dropdownMenu组件自定义title 在利用vue开发h5页面时,通常我们选择的是vant作为我们的组件库,它提供60多个高质量组件,覆盖移动端各类场景。正如大多数组件库一样,很多都有这样或那样的bug,vant也是...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 73,695
精华内容 29,478
关键字:

menu组件