WinDesign

# Menu 菜单

# 代码演示

侧栏

默认menu是横向的模式(mode = 'horizontal'), 设置 mode = 'vertical' 可以将其变成侧栏模式, 侧栏也有自定义样式的能力, 需要通过 styleConfig 参数进行配置, 具体参数请查看例子或参考说明。

当前激活菜单index: 4

查看代码 

<template>
  <w-radio-group v-model="theme">
    <w-radio label="light">light</w-radio>
    <w-radio label="dark">dark</w-radio>
    <w-radio label="custom">自定义</w-radio>
  </w-radio-group>
  <w-menu :defaultActived="actived" mode="vertical"
    :theme="theme !== 'custom' ? theme : ''"
    :styleConfig="theme === 'custom' ? styleConfig : {}"
    @select="handleSelectChange">
      <w-menu-item index="1" disabled>
        <i class="w-icon w-icon-user" />患者中心</w-menu-item>
      <w-submenu index="2">
        <template slot="sub-title">
          <i class="w-icon w-icon-mark" />特别关注</template>
        <w-menu-group title="男性患者">
          <w-menu-item index="2-1">
            <w-tag size="mini">ICU</w-tag>
            <span style="margin-left: 10px">李思</span>
          </w-menu-item>
          <w-menu-item index="2-2">
            <w-tag size="mini">ICU</w-tag>
            <span style="margin-left: 10px">吴中山</span>
          </w-menu-item>
        </w-menu-group>
        <w-menu-group>
          <template slot="title">女性患者</template>
          <w-menu-item index="2-3">
            <w-tag size="mini">ICU</w-tag>
            <span style="margin-left: 10px">陈笑笑</span>
          </w-menu-item>
        </w-menu-group>
      </w-submenu>
      <w-submenu index="3">
        <template slot="sub-title">
          <i class="w-icon w-icon-time" />工作中心</template>
        <w-menu-item index="3-1">
          今日就诊
        </w-menu-item>
        <w-menu-item index="3-2">
          未就诊
        </w-menu-item>
        <w-menu-item index="3-3">
          已就诊
        </w-menu-item>
        <w-submenu index="3-4">
          <template slot="sub-title">
            就诊流程</template>
          <w-menu-item index="3-4-1">
            填写病历
          </w-menu-item>
          <w-menu-item index="3-4-2">
            检查项目
          </w-menu-item>
          <w-menu-item index="3-4-3">
            检验项目
          </w-menu-item>
          <w-menu-item index="3-4-4">
            开具处方
          </w-menu-item>
        </w-submenu>
    </w-submenu>
    <w-menu-item index="4">
      <i class="w-icon w-icon-config" />个人设置
    </w-menu-item>
  </w-menu>
</template>
<script>
export default {
  data () {
    return {
      theme: 'light',
        styleConfig: {
          background: '#1C55E9',
          item: {
            textColor: '#fff',
            activedTextColor: '#fff',
            hoverBackground: '#608eff',
            submenuBackground: '#0637ad',
            activedBackground: '#FFB127'
          }
        },
      actived: '4',
    }
  },
  methods: {
    handleSelectChange (val) {
      this.actived = val
    }
  }
}
</script>
<style lang="scss">
.menu-vertical-demo {
  .slot-wrapper {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    background-color: #E5E8ED;
    overflow: hidden;
  }
  .w-radio-group {
    width: 100%;
    margin-bottom: 16px;
  }
  i.w-icon {
    margin-right: 8px;
  }
  .w-menu {
    float: left;
    width: 200px;
    min-height: 340px;
  }
  .w-menu.is-custom {
    i.w-icon {
      color: #fff;
    }
  }
  .content {
    float: right;
    width: calc(100% - 210px);
    margin: 0 0 0 10px;
    padding: 15px;
    box-sizing: border-box;
    background-color: #fff;
  }
}
</style>

可折叠

折叠的功能只是针对 mode = 'vertical' 模式的, 有参数 collapse 控制是否展开与折叠。

展开

查看代码 

<template>
<div>
  <div class="tool-zoom">
    <w-switch v-model="collapse"
      active-text="折叠" inactive-text="展开">
    </w-switch>
    </div>
    <w-menu mode="vertical" defaultActived="2-1"
      :collapse="collapse" :defaultOpened="['3-1']"
      fold-icon="w-icon-arrow-bottom"
      @select="handleSelectChange">
        <w-menu-item index="1" disabled>
            <i class="w-icon w-icon-user" />
            <span slot="title">患者中心</span>
        </w-menu-item>
        <w-submenu index="2" width="140px">
            <template slot="sub-title">
                <i class="w-icon w-icon-mark" />
                <span>特别关注</span>
            </template>
            <w-menu-group title="男性患者">
            <w-menu-item index="2-1">
                <w-tag size="mini">ICU</w-tag>
                <span style="margin-left: 10px">李思</span>
            </w-menu-item>
            <w-menu-item index="2-2">
                <w-tag size="mini">ICU</w-tag>
                <span style="margin-left: 10px">吴中山</span>
            </w-menu-item>
            </w-menu-group>
            <w-menu-group>
            <template>女性患者</template>
            <w-menu-item index="2-3">
                <w-tag size="mini">ICU</w-tag>
                <span style="margin-left: 10px">陈笑笑</span>
            </w-menu-item>
            </w-menu-group>
        </w-submenu>
        <w-submenu index="3" width="140px">
            <template slot="sub-title">
                <i class="w-icon w-icon-time" />
                <span>工作中心</span>
            </template>
            <w-menu-item index="3-1">
                今日就诊
            </w-menu-item>
            <w-menu-item index="3-2">
                未就诊
            </w-menu-item>
            <w-menu-item index="3-3">
                已就诊
            </w-menu-item>
            <w-submenu index="3-4" width="140px">
            <template slot="sub-title">
                就诊流程</template>
            <w-menu-item index="3-4-1">
                填写病历
            </w-menu-item>
            <w-menu-item index="3-4-2">
                检查项目
            </w-menu-item>
            <w-menu-item index="3-4-3">
                检验项目
            </w-menu-item>
            <w-menu-item index="3-4-4">
                开具处方
            </w-menu-item>
        </w-submenu>
        </w-submenu>
        <w-menu-item index="4">
            <i class="w-icon w-icon-config" />
            <span slot="title">个人设置</span>
        </w-menu-item>
    </w-menu>
    <div :class="['content', {
        'is-menu-collapse': collapse
    }]"></div>
</div>
</template>
<script>
export default {
  data () {
    return {
      collapse: false
    }
  },
  methods: {
    handleSelectChange (val) {
      this.actived = val
    }
  }
}
</script>
<style lang="scss">
.menu-collapse-demo-1 {
    .slot-wrapper {
      display: flex;
      flex-wrap: wrap;
      box-sizing: border-box;
      background-color: #E5E8ED;
    }
    .tool-zoom {
      width: 100%;
      margin-bottom: 16px;
    }
    i.w-icon {
      margin-right: 8px;
    }
    .w-menu {
      float: left;
      width: 200px;
      min-height: 340px;
    }
    .w-menu--collapse {
      width: 65px;
    }
    .content {
      float: right;
      width: calc(100% - 210px);
      margin: 0 0 0 10px;
      padding: 15px;
      box-sizing: border-box;
      background-color: #fff;
      will-change: width;
      transition: width .3s cubic-bezier(.645, .045, .355, 1);
    }
    .is-menu-collapse {
      width: calc(100% - 85px);
      &>div.is-actived {
        i.w-icon {
          color: #0b4aed !important;
        }
      }
    }
}
</style>

# API

参数 说明 类型 可选值 默认值 Version
collapse 是否折叠菜单（仅在 mode 为 vertical 时生效） Boolean — false
default-actived 当前激活菜单的 index(默认展开该菜单所在的各级菜单) String — — v1.2.1
default-active * 同 default-actived String — — v2.0.0
default-opened 当前打开的 sub-menu 的 index 的数组 Array — —
default-openeds * 同 default-opened Array — — v2.0.0
fold-icon submenu 折叠的 icon String — 'w-icon-triangle-bottom' v1.4.0
inner 菜单是否存在上下边距样式(仅自定义横向菜单有效) Boolean — false v2.0.0
mode 模式 String 'horizontal' | 'vertical' 'horizontal'
round 菜单顶部是否添加圆角样式(仅自定义横向菜单有效) Boolean — false v2.0.0
router 是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 Boolean — false v2.0.0
unique-opened 是否只保持一个子菜单的展开 Boolean — false
style-config 自定义菜单样式(具体查看 style-config 说明) Object — —
trigger 子菜单打开的触发方式 String 'hover' | 'click' 'click'
menu-trigger * 同 trigger String 'hover' | 'click' 'click' v2.0.0
theme 内置菜单主题(自定义 menu 样式时,传空或者'custom') String 'light' | 'dark' 'light'

# 自定义菜单配置 style-config

参数名称 说明 Version
background 菜单栏背景色 v2.0.0
borderColor 菜单栏底部描边色（仅横向有效） v2.0.0
item.textColor 菜单字色 v2.0.0
item.activedTextColor 菜单被激活的字色 v2.0.0
item.activedBorder 菜单被激活的 描边色 v2.0.0
item.background 菜单默认状态下的背景色 v2.0.0
item.hoverBackground 菜单被 hover 状态下的背景色 v2.0.0
item.activedBackground 菜单被激活状态下的背景色 v2.0.0
item.submenuBackground 子菜单的背景色(仅在 mode 为 horizontal 模式下生效) v2.0.0
事件名称 说明 回调参数 Version
close sub-menu 收起的回调 index: 打开子菜单项的 index v2.0.0
open sub-menu 展开的回调 index: 打开子菜单项的 index v2.0.0
select 菜单激活回调 index: 选中菜单项的 index
toggle-submenu 当前操作的 sub-menu 的展开状态的回调 { index: (当前 sub-menu 的 index), status: (展开 true 或收起 false) }
参数 说明 类型 可选值 默认值 Version
disabled 是否禁用 Boolean — false
index 唯一标志 String — —
popper-class 弹出菜单的自定义类名 String — —
width 菜单 popper 宽度 String — —
show-timeout 展开 sub-menu 的延时(单位 ms) Number — 200 v2.0.0
hide-timeout 收起 sub-menu 的延时(单位 ms) Number — 200 v2.0.0
popper-append-to-body 子菜单下拉框气泡是否插入至 body Boolean true v2.0.0
参数 说明 类型 可选值 默认值 Version
disabled 是否禁用 Boolean — false
index 唯一标志 String — —
route vue-router 路径数据 String Object — —
参数 说明 类型 可选值 默认值 Version
title 分组标题 String — —
上次更新: 9/27/2024, 2:49:46 PM

← Pagination 分页 →