🔨 weView

Menu导航菜单

为网站提供导航功能的菜单栏，可内嵌子菜单

顶部模式

在菜单中通过submenu组件可以生成子菜单。

  • HTML
  • CSS
  • JavaScript
  • 消息
  • TypeScript
  • Git
<template>
    <div class="wrap">
      <w-menu defaultTo="/html" mode="horizontal" @select="handlerSelect">
        <w-menu-item to="/html">HTML</w-menu-item>
        <w-menu-item to="/css">CSS</w-menu-item>
        <w-menu-item to="/javascript">JavaScript</w-menu-item>
        <w-sub-menu to="Vue系列">
            <template #title>Vue系列</template>
             <w-sub-menu to="Vue">
                <template #title>Vue框架</template>
                <w-menu-item to="/vue2">Vue2</w-menu-item>
                <w-menu-item to="/vue3">Vue3</w-menu-item>
            </w-sub-menu>
             <w-menu-item to="/vuex">Vuex</w-menu-item>
                <w-menu-item to="/vue-router">Vue Router</w-menu-item>
             <w-sub-menu to="unit-test">
                <template #title>单元测试</template>
                <w-menu-item to="/vue-test-utils">Vue Test Utils</w-menu-item>
                <w-menu-item to="/vue-testing-library">Vue Testing Library</w-menu-item>
            </w-sub-menu>
        </w-sub-menu>
        <w-menu-item disabled>消息</w-menu-item>
        <w-menu-item to="/typescript">TypeScript</w-menu-item>
        <w-menu-item to="/git">Git</w-menu-item>
    </w-menu>
    </div>
</template>
<script>
export default {
    setup() {
        function handlerSelect(to: string) {
            console.log(to)
        }
        return {
            handlerSelect
        }
    }
  
}
</script>
<style>
.wrap {
    width: 650px;
    height: 320px;
    overflow: visible;
}
</style>

侧边导航栏 

导航菜单默认为水平模式，通过mode属性可以使导航菜单变更为垂直模式，通过MenuItemGroup组件可以实现菜单分组，分组名可以通过title属性直接设定，也可以通过具名slot来设定。
  • Webpack
  • Vite
  • Git
<template>
    <div class="wrap">
      <w-menu defaultTo="/git" mode="vertical" @select="handlerSelect">
        <w-sub-menu to="basic">
            <template #title>入门</template>
            <w-menu-item-group>
                <template #title>基础语言</template>
                <w-menu-item to="/html">HTML</w-menu-item>
                <w-menu-item to="/css">CSS</w-menu-item>
                <w-menu-item to="/javascript">JavaScript</w-menu-item>
            </w-menu-item-group>
            <w-menu-item-group title="框架">
                <w-sub-menu to="Vue">
                    <template #title>Vue框架</template>
                    <w-menu-item to="/vue2">Vue2</w-menu-item>
                    <w-menu-item to="/vue3">Vue3</w-menu-item>
                </w-sub-menu>
                <w-menu-item to="/react">React</w-menu-item>
            </w-menu-item-group>
        </w-sub-menu>
         
        <w-sub-menu to="advance">
            <template #title>进阶</template>
            <w-menu-item-group>
                <template #title>Vue工具库</template>
                <w-menu-item to="/vuex">Vuex</w-menu-item>
                <w-menu-item to="/vue-router">Vue Router</w-menu-item>
                <w-sub-menu to="unit-test">
                    <template #title>单元测试</template>
                    <w-menu-item to="/vue-test-utils">Vue Test Utils</w-menu-item>
                    <w-menu-item to="/vue-testing-library">Vue Testing Library</w-menu-item>
                </w-sub-menu>
            </w-menu-item-group>
            <w-menu-item-group>
                <template #title>语言</template>
                <w-menu-item to="/typescript">TypeScript</w-menu-item>
                <w-menu-item to="/sass">Sass</w-menu-item>
            </w-menu-item-group>
        </w-sub-menu>  
        <w-menu-item to="/webpack">Webpack</w-menu-item>    
        <w-menu-item to="/vite">Vite</w-menu-item> 
        <w-menu-item to="/git">Git</w-menu-item>  
    </w-menu>
    </div>
</template>

<script>
export default {
    setup() {
        function handlerSelect(to: string) {
            console.log(to)
        }
        return {
            handlerSelect
        }
    }
  
}
</script>
<style>
.wrap {
    width: 650px;
    height: 320px;
    overflow: visible;
}
</style>
属性类型可选值默认值含义
modestringhorizontal / verticalhorizontal菜单水平/垂直展示
default-tostring--页面加载时默认激活的菜单项
routerbooleantrue\falsefalse是否启用 vue-router 模式。启用该模式会在激活导航时以MenuItem的to属性值作为path进行路由跳转, 使用default-to来设置加载时的激活项。
text-colorstring-#2a2a2a文字颜色（十六进制格式）
active-colorstring-#7a45bd激活菜单项的文字颜色（十六进制格式）
事件名含义参数
select激活菜单项(MenuItem)时触发的回调to:激活的MenuItem的to属性值
插槽名含义子标签
-默认插槽SubMenu / MenuItem / MenuItemGroup
属性类型可选值默认值含义
tostring/null--MenuItem的唯一标志, 当开启路由模式后，则为点击后跳转的目标路由，即等同于vue-router的to属性
disabledbooleantrue\falsefalse禁用菜单项
插槽名含义
-默认插槽
title标题内容
属性类型可选值默认值含义
tostring/null--SubMenu的唯一标志
disabledbooleantrue\falsefalse禁用子菜单
插槽名含义子标签
-默认插槽SubMenu / MenuItem / MenuItemGroup
title标题内容-
事件名含义参数
click点击子菜单标题时触发的回调to:点击的SubMenu的to属性值
属性类型可选值默认值含义
titlestring-''分组的标题
插槽名含义子标签
-默认插槽SubMenu / MenuItem / MenuItemGroup
title标题内容-