Lx-UI

# 导航菜单

# 介绍

本组件是在el-menu的上进行的二次封装，目的是减少html代码的编写，只需要传入一个对象数组即可展现出菜单， 为了更好的兼容不同的数据结构和命名，提供了node-props属性，用户可以按照实际的字段名称取相应的值。

# 示例

<template>
  <div>
    <lx-menu
        :data="menuData"
        :auto-jump="false"
        :node-props="{
          title: 'meta.title',
          index: 'id'
        }"
        @click="clickMenu"
    ></lx-menu>
  </div>
</template>
<script>
export default {
  data () {
    return {
      menuData: [
        {
          id: 'goods',
          icon: 'el-icon-s-shop',
          meta: {
            title: '商品管理'
          },
          children: [
            {
              path: '/goods',
              id: 'goodsList',
              meta: {
                title: '商品管理',
                name: 'goods'
              }
            }
          ]
        },
        {
          id: 'sys',
          icon: 'el-icon-setting',
          meta: {
            title: '系统设置'
          },
          children: [
            {
              path: '/sys/permission-list',
              id: 'permissionList',
              meta: {
                title: '权限列表',
                name: 'permission-list'
              }
            },
            {
              path: '/sys/permission/edit',
              id: 'permissionEdit',
              hidden: true,
              meta: {
                title: '权限列表-编辑',
                name: 'permission-edit'
              }
            },
            {
              path: '/sys/user-list',
              id: 'userList',
              meta: {
                title: '用户管理',
                name: 'user-list'
              }
            },
            {
              path: '/sys/user/edit',
              id: 'userEdit',
              hidden: true,
              meta: {
                title: '用户-编辑',
                name: 'user-edit'
              }
            }
          ]
        }
      ]
    }
  },
  methods: {
    clickMenu (row) {
      console.log('clickMenu', row)
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
Expand Copy
参数 说明 数值类型 可选值 默认值 其他
data 数据 Array - -
nodeProps 自定义prop，可以自定义从哪个字段取值 Object { title, index, children, path, icon } { title, index, children, path, icon }
default-active 默认选中的值 String / Number - -
auto-jump 点击是否自动跳转 Boolean true / false true -
collapse 是否收起菜单 Boolean true / false false -
height 菜单高度 String - - -
事件名 说明 回调参数
select 被点击的时候回调 index: 选中菜单项的 index, indexPath: 选中菜单项的 index path
click menuItem被点击的时候的回调 data：被点击的那一项的数据

# nodeProps

属性 说明 数值类型
title 菜单上显示的文字 -
icon 文字左侧的图标 -
children 子级菜单 -
path url，跳转地址 -
index 菜单每一项的主要标识，与defaultActive的值匹配 String
hidden 是否隐藏，可以是Boolean类型，也可以是一个function，function返回true则隐藏，返回false则不隐藏 Boolean / Function

← 上传图片列表 →