2.0.3 • Published 5 months ago

@wu-component/wu-menu-sub v2.0.3

Weekly downloads
-
License
ISC
Repository
github
Last release
5 months ago

NavMenu 导航菜单

为中后台系统提供导航功能的菜单。

垂直

垂直导航菜单。

::: demo

<template>
    <div style="display: flex;justify-content: center">
        <div style="width: 240px">
            <wu-plus-menu>
                <wu-plus-menu-item index="1">
                    <div style="display: flex;align-items: center">
                        <wu-plus-icon style="font-size: 24px;" name="setting"></wu-plus-icon>
                        <span slot="title" style="padding-left: 8px">处理中心</span>
                    </div>
                </wu-plus-menu-item>
                <wu-plus-sub-menu index="2">
                    <div slot="title" style="display: flex;align-items: center">
                        <wu-plus-icon style="font-size: 24px;" name="setting"></wu-plus-icon>
                        <span style="padding-left: 8px">
                            导航组
                        </span>
                    </div>
                    <wu-plus-menu-item index="5">系统配置</wu-plus-menu-item>
                    <wu-plus-menu-item index="6">用户中心</wu-plus-menu-item>
                </wu-plus-sub-menu>
                <wu-plus-menu-item index="12">
                    <div style="display: flex;align-items: center">
                        <wu-plus-icon style="font-size: 24px;" name="setting"></wu-plus-icon>
                        <span slot="title" style="padding-left: 8px">用戶中心</span>
                    </div>
                </wu-plus-menu-item>
                <wu-plus-menu-item index="13">
                    <div style="display: flex;align-items: center">
                        <wu-plus-icon style="font-size: 24px;" name="setting"></wu-plus-icon>
                        <span slot="title" style="padding-left: 8px">系統設置</span>
                    </div>
                </wu-plus-menu-item>
            </wu-plus-menu>
        </div>
        <div style="width: 240px; margin-left: 32px">
            <wu-plus-menu background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" id="menuId1">
                <wu-plus-menu-item index="1">
                    <div style="display: flex;align-items: center">
                        <wu-plus-icon style="font-size: 24px;" name="setting"></wu-plus-icon>
                        <span slot="title" style="padding-left: 8px">处理中心</span>
                    </div>
                </wu-plus-menu-item>
                <wu-plus-sub-menu index="2" disabled="false">
                    <div slot="title" style="display: flex;align-items: center">
                        <wu-plus-icon style="font-size: 24px;" name="setting"></wu-plus-icon>
                        <span style="padding-left: 8px">
                            导航组
                        </span>
                    </div>
                    <wu-plus-menu-item index="5">系统配置</wu-plus-menu-item>
                    <wu-plus-menu-item index="6">用户中心</wu-plus-menu-item>
                </wu-plus-sub-menu>
                <wu-plus-menu-item index="12">
                    <div style="display: flex;align-items: center">
                        <wu-plus-icon style="font-size: 24px;" name="setting"></wu-plus-icon>
                        <span slot="title" style="padding-left: 8px">用戶中心</span>
                    </div>
                </wu-plus-menu-item>
                <wu-plus-menu-item index="13" >
                <div style="display: flex;align-items: center">
                    <wu-plus-icon style="font-size: 24px;" name="setting"></wu-plus-icon>
                    <span slot="title" style="padding-left: 8px">系統設置</span>
                </div>
            </wu-plus-menu-item>
            </wu-plus-menu>
        </div>
        </div>
</template>
<script>
</script>

:::

水平

水平菜单导航

::: demo

<template>
    <div style="display: flex;justify-content: center">
        <div style="width: 100%">
            <wu-plus-menu mode="horizontal">
                <wu-plus-menu-item index="1">
                    <div style="display: flex;align-items: center">
                        <wu-plus-icon style="font-size: 24px;" name="setting"></wu-plus-icon>
                        <span slot="title" style="padding-left: 8px">处理中心</span>
                    </div>
                </wu-plus-menu-item>
                <wu-plus-sub-menu index="2" disabled="false">
                    <div slot="title" style="display: flex;align-items: center">
                        <wu-plus-icon style="font-size: 24px;" name="setting"></wu-plus-icon>
                        <span style="padding-left: 8px">
                            导航组
                        </span>
                    </div>
                    <wu-plus-menu-item index="5">系统配置</wu-plus-menu-item>
                    <wu-plus-menu-item index="6">用户中心</wu-plus-menu-item>
                </wu-plus-sub-menu>
                <wu-plus-menu-item index="12">
                    <div style="display: flex;align-items: center">
                        <wu-plus-icon style="font-size: 24px;" name="setting"></wu-plus-icon>
                        <span slot="title" style="padding-left: 8px">用戶中心</span>
                    </div>
                </wu-plus-menu-item>
                <wu-plus-menu-item index="13">
                    <div style="display: flex;align-items: center">
                        <wu-plus-icon style="font-size: 24px;" name="setting"></wu-plus-icon>
                        <span slot="title" style="padding-left: 8px">系統設置</span>
                    </div>
                </wu-plus-menu-item>
            </wu-plus-menu>
        </div>
    </div>
</template>
<script>
</script>

:::

禁用

wu-plus-menu-item 和 wu-plus-sub-menu 可以通过 disabled 属性禁用菜单。

::: demo

<template>
    <div style="display: flex;justify-content: center">
        <div style="width: 100%">
            <wu-plus-menu mode="horizontal">
                <wu-plus-menu-item index="1" disabled="true">
                    <div style="display: flex;align-items: center">
                        <wu-plus-icon style="font-size: 24px;" name="setting"></wu-plus-icon>
                        <span slot="title" style="padding-left: 8px">处理中心</span>
                    </div>
                </wu-plus-menu-item>
                <wu-plus-sub-menu index="2" disabled="true">
                    <div slot="title" style="display: flex;align-items: center">
                        <wu-plus-icon style="font-size: 24px;" name="setting"></wu-plus-icon>
                        <span style="padding-left: 8px">
                            导航组
                        </span>
                    </div>
                    <wu-plus-menu-item index="5">系统配置</wu-plus-menu-item>
                    <wu-plus-menu-item index="6">用户中心</wu-plus-menu-item>
                </wu-plus-sub-menu>
                <wu-plus-menu-item index="12">
                    <div style="display: flex;align-items: center">
                        <wu-plus-icon style="font-size: 24px;" name="setting"></wu-plus-icon>
                        <span slot="title" style="padding-left: 8px">用戶中心</span>
                    </div>
                </wu-plus-menu-item>
                <wu-plus-menu-item index="13">
                    <div style="display: flex;align-items: center">
                        <wu-plus-icon style="font-size: 24px;" name="setting"></wu-plus-icon>
                        <span slot="title" style="padding-left: 8px">系統設置</span>
                    </div>
                </wu-plus-menu-item>
            </wu-plus-menu>
        </div>
    </div>
</template>
<script>
</script>

:::

默认选中、默认展开

::: demo

<template>
    <div style="display: flex;justify-content: center">
        <div style="width: 240px">
            <wu-plus-menu background-color="#545c64" text-color="#fff" default-active="1" default-openeds="['2']" active-text-color="#ffd04b" id="menuId1">
                <wu-plus-menu-item index="1">
                    <div style="display: flex;align-items: center">
                        <wu-plus-icon style="font-size: 24px;" name="setting"></wu-plus-icon>
                        <span slot="title" style="padding-left: 8px">处理中心</span>
                    </div>
                </wu-plus-menu-item>
                <wu-plus-sub-menu index="2" disabled="false">
                    <div slot="title" style="display: flex;align-items: center">
                        <wu-plus-icon style="font-size: 24px;" name="setting"></wu-plus-icon>
                        <span style="padding-left: 8px">
                        导航组
                    </span>
                    </div>
                    <wu-plus-menu-item index="5">系统配置</wu-plus-menu-item>
                    <wu-plus-menu-item index="6">用户中心</wu-plus-menu-item>
                </wu-plus-sub-menu>
                <wu-plus-menu-item index="12">
                    <div style="display: flex;align-items: center">
                        <wu-plus-icon style="font-size: 24px;" name="setting"></wu-plus-icon>
                        <span slot="title" style="padding-left: 8px">用戶中心</span>
                    </div>
                </wu-plus-menu-item>
                <wu-plus-menu-item index="13" disabled="true">
                    <div style="display: flex;align-items: center">
                        <wu-plus-icon style="font-size: 24px;" name="setting"></wu-plus-icon>
                        <span slot="title" style="padding-left: 8px">系統設置</span>
                    </div>
                </wu-plus-menu-item>
            </wu-plus-menu>
        </div>
    </div>
</template>
<script>
</script>

:::

Attributes

参数说明类型可选值默认值
mode模式Stringhorizontal、verticalvertical
background-color菜单的背景色（仅支持 hex 格式）String--#ffffff
text-color菜单的文字颜色（仅支持 hex 格式）String--#303133
active-text-color当前激活菜单的文字颜色（仅支持 hex 格式）String--#409EFF
default-active当前激活菜单的 indexString----
default-openeds当前打开的 sub-menu 的 index 的数组String[]--[]

Event

事件名说明参数
select菜单激活回调 (index: 选中菜单项的 index, indexPath: 选中菜单项的 index path)(event: CustomEvent) => void
opensub-menu 展开的回调 (index: 打开的 sub-menu 的 index， indexPath: 打开的 sub-menu 的 index path)(event: CustomEvent) => void
closesub-menu 收起的回调 (index: 收起的 sub-menu 的 index， indexPath: 收起的 sub-menu 的 index path)(event: CustomEvent) => void

Slot

参数说明
--导航item内容
title导航item名称
@wu-component/common@wu-component/web-core-plus
@infinitebrahmanuniverse/nolb-_wu@everything-registry/sub-chunk-1024@wu-component/wu-menu@wu-component/ui-plus
2.0.3

5 months ago

2.0.1

1 year ago

2.0.0

1 year ago

1.11.8

1 year ago

1.11.7

1 year ago

1.11.6

1 year ago

1.11.4

1 year ago

1.11.1

1 year ago

1.10.6

1 year ago

1.10.2

1 year ago

1.10.1

1 year ago

1.9.24

2 years ago

1.9.21

2 years ago

1.9.20

2 years ago

1.9.17

2 years ago

1.9.1

2 years ago

1.8.0

2 years ago

1.7.0

2 years ago

1.6.1

2 years ago

1.6.0

2 years ago

1.5.0

2 years ago

1.4.3

2 years ago

1.4.2

2 years ago

1.4.1

2 years ago

1.4.0

2 years ago

1.0.1

2 years ago

0.0.9

2 years ago

0.0.8

2 years ago

0.0.7

2 years ago

0.0.6

2 years ago

0.0.5

2 years ago

0.0.4

2 years ago

0.0.3

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago