(window.webpackJsonp=window.webpackJsonp||[]).push([[29],{355:function(t,e){t.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAWCAYAAADNX8xBAAAAAXNSR0IArs4c6QAAAXVJREFUOBHdVD9Lw1AQv3u2oGnVRfQLFL+DS6eCg5M4uIkuig5OpQURCSJCWx0c4+gguLuJi58j+AlcKkkrDeS8F/Lyz7yk1c0Hyd273593CbkgFCwyzXkYjfYCimE8oGl+6egVHRDUXfcRiLaD3HE2Oe7o+KgDuJslcJwPxqshx4N6fYW7+szT/DBiA8EGp0y+5mshIxrz/gwGgztEpCSWMqJOZxF8/5kJzSQpJ3/j7ra4O0dhQiVBJLrhWGYiqU1w3dtAE96ijqjdbnHtJQmW5kK0sN9/lbxkR8elwizB909UKWm0oYozxEgTGyGuzWCgqKsqiY2I4lyh5XFOUX4jVtpU/MdGSJZVBdu+4Ck/Tz30tBvEK2g0Lit/MpGHyQZsm79sooNpDy/g7Vd4itehVkPwPKOAmA9NJsTaMQ8wRUObZfIv5ZB/KVaqLsQRD+l9qhZu9N8R4hMgvkcimcuaZmk7knzqdpf5He4GWjbBXm+o8YFvr2Rlp7W/fgQAAAAASUVORK5CYII="},420:function(t,e,a){"use strict";a.r(e);var l={data:function(){return{activeName:"1",type:"light",icon:a(355),menu:[{title:"组件",icon:a(355),subMenu:[{title:"Layout 栅格",path:"/ui/layout"},{title:"Icon 图标",path:"/ui/icon"},{title:"Menu",path:"/ui/menu"}]},{title:"Button",path:"/ui/button"},{title:"Tab",path:"/ui/tab"}]}},mounted:function(){console.log(this)},methods:{selectMenu:function(t){console.log("activeName:"+this.activeName,"name:"+t)}}},i=a(46),v=Object(i.a)(l,(function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"menu-导航菜单"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-导航菜单"}},[t._v("#")]),t._v(" Menu 导航菜单")]),t._v(" "),a("p",[t._v("为页面和功能提供导航的菜单列表。")]),t._v(" "),a("h2",{attrs:{id:"概述"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#概述"}},[t._v("#")]),t._v(" 概述")]),t._v(" "),a("p",[t._v("导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。")]),t._v(" "),a("h2",{attrs:{id:"代码示例"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#代码示例"}},[t._v("#")]),t._v(" 代码示例")]),t._v(" "),a("ClientOnly",[a("row",[a("cell",{staticClass:"pr-20",attrs:{span:"12"}},[a("componetTemplate",{attrs:{title:"基础用法",template:"ui/templates/menu/1.html"},scopedSlots:t._u([{key:"demo",fn:function(){return[a("Wb-menu",{attrs:{"active-name":t.activeName,"auto-close":!0,type:t.type,width:180},on:{"update:activeName":function(e){t.activeName=e},"update:active-name":function(e){t.activeName=e},select:t.selectMenu}},[a("Wb-menu-item",{attrs:{icon:t.icon,name:"1"}},[t._v("我的菜单")]),t._v(" "),a("Wb-menu-item",{attrs:{name:"2"}},[t._v("个人信息")]),t._v(" "),a("Wb-menu-item",{attrs:{name:"3"}},[t._v("我的管理")]),t._v(" "),a("Wb-sub-menu",{attrs:{title:"内容管理"}},[a("Wb-menu-item",{attrs:{name:"4-1"}},[t._v("新增")]),t._v(" "),a("Wb-menu-item",{attrs:{name:"4-2"}},[t._v("修改")])],1),t._v(" "),a("Wb-sub-menu",{attrs:{title:"内容管理"}},[a("Wb-menu-group",{attrs:{title:"编辑"}},[a("Wb-menu-item",{attrs:{name:"5-1"}},[t._v("新增")]),t._v(" "),a("Wb-menu-item",{attrs:{name:"5-2"}},[t._v("修改")])],1),t._v(" "),a("Wb-menu-group",{attrs:{title:"查询"}},[a("Wb-menu-item",{attrs:{name:"5-3"}},[t._v("文章")]),t._v(" "),a("Wb-menu-item",{attrs:{name:"5-4"}},[t._v("作者")])],1)],1)],1),t._v(" "),a("Wb-menu",{staticStyle:{"margin-top":"20px"},attrs:{"active-name":t.activeName,"auto-close":!0,mode:"horizontal",type:t.type},on:{"update:activeName":function(e){t.activeName=e},"update:active-name":function(e){t.activeName=e},select:t.selectMenu}},[a("Wb-menu-item",{attrs:{name:"1"}},[t._v("我的菜单")]),t._v(" "),a("Wb-menu-item",{attrs:{name:"2"}},[t._v("个人信息")]),t._v(" "),a("Wb-menu-item",{attrs:{name:"3"}},[t._v("我的管理")]),t._v(" "),a("Wb-sub-menu",{attrs:{title:"内容管理"}},[a("Wb-menu-item",{attrs:{name:"4-1"}},[t._v("新增")]),t._v(" "),a("Wb-menu-item",{attrs:{name:"4-2"}},[t._v("修改")])],1),t._v(" "),a("Wb-sub-menu",{attrs:{title:"内容管理"}},[a("Wb-menu-group",{attrs:{title:"编辑"}},[a("Wb-menu-item",{attrs:{name:"5-1"}},[t._v("新增")]),t._v(" "),a("Wb-menu-item",{attrs:{name:"5-2"}},[t._v("修改")])],1),t._v(" "),a("Wb-menu-group",{attrs:{title:"查询"}},[a("Wb-menu-item",{attrs:{name:"5-3"}},[t._v("文章")]),t._v(" "),a("Wb-menu-item",{attrs:{name:"5-4"}},[t._v("作者")])],1)],1)],1)]},proxy:!0},{key:"description",fn:function(){return[a("p",[t._v("有两种布局类型，可选horizontal（水平）、vertical(垂直)两种，默认为vertical。")]),t._v(" "),a("p",[t._v("有两种颜色类型，点击下方可切换：")]),t._v(" "),a("Radio-group",{model:{value:t.type,callback:function(e){t.type=e},expression:"type"}},[a("Radio",{attrs:{value:"light"}},[t._v("\n                        light\n                    ")]),t._v(" "),a("Radio",{attrs:{value:"dark"}},[t._v("\n                        dark\n                    ")])],1)]},proxy:!0}])})],1),t._v(" "),a("cell",{staticClass:"pl-20",attrs:{span:"12"}},[a("componetTemplate",{attrs:{title:"配合vue-router使用",template:"ui/templates/menu/2.html"},scopedSlots:t._u([{key:"demo",fn:function(){return[a("route-menu",{attrs:{menu:t.menu,width:180}})]},proxy:!0},{key:"description",fn:function(){return[a("p",[t._v("传入MenuList，就可以自动实现点击跳转的逻辑")])]},proxy:!0}])})],1)],1)],1),t._v(" "),a("h2",{attrs:{id:"api"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#api"}},[t._v("#")]),t._v(" API")]),t._v(" "),a("h3",{attrs:{id:"routemenu-props"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#routemenu-props"}},[t._v("#")]),t._v(" RouteMenu Props")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",{staticStyle:{"text-align":"left"}},[t._v("属性")]),t._v(" "),a("th",{staticStyle:{"text-align":"left"}},[t._v("说明")]),t._v(" "),a("th",{staticStyle:{"text-align":"left"}},[t._v("类型")]),t._v(" "),a("th",{staticStyle:{"text-align":"left"}},[t._v("默认值")])])]),t._v(" "),a("tbody",[a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("mode")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("布局模式，可选有"),a("code",[t._v("horizontal")]),t._v("水平, "),a("code",[t._v("vertical")]),t._v(" 垂直")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("String")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("vertical")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("type")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("颜色类型，可选有"),a("code",[t._v("light")]),t._v("白色, "),a("code",[t._v("dark")]),t._v("蓝色")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("String")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("light")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("width")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("宽度")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("Number/String")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("autoClose")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("是否自动收起菜单。当垂直模式时，点击菜单列表，是否关闭已经打开的菜单列表")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("Boolean")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("false")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("menu")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("菜单配置项")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("Array")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("无")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("menu.title")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("菜单标题")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("String")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("空")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("menu.path")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("菜单项点击后，跳转路径")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("String")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("空")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("menu.subMenu")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("子菜单，每项也有path和title")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("Array")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("空")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("menu.icon")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("图标")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("String")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("空")])])])]),t._v(" "),a("h3",{attrs:{id:"menu-props"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-props"}},[t._v("#")]),t._v(" Menu Props")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",{staticStyle:{"text-align":"left"}},[t._v("属性")]),t._v(" "),a("th",{staticStyle:{"text-align":"left"}},[t._v("说明")]),t._v(" "),a("th",{staticStyle:{"text-align":"left"}},[t._v("类型")]),t._v(" "),a("th",{staticStyle:{"text-align":"left"}},[t._v("默认值")])])]),t._v(" "),a("tbody",[a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("mode")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("布局模式，可选有"),a("code",[t._v("horizontal")]),t._v("水平, "),a("code",[t._v("vertical")]),t._v(" 垂直")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("String")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("vertical")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("type")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("颜色类型，可选有"),a("code",[t._v("light")]),t._v("白色, "),a("code",[t._v("dark")]),t._v("蓝色")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("String")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("light")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("width")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("宽度")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("Number/String")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("undefined")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("active-name")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("激活菜单的 name 值")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("Number/String")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("undefined")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("autoClose")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("是否自动收起菜单。当垂直模式时，点击菜单列表，是否关闭已经打开的菜单列表")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("Boolean")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("false")])])])]),t._v(" "),a("h3",{attrs:{id:"menu-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-events"}},[t._v("#")]),t._v(" Menu Events")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",{staticStyle:{"text-align":"left"}},[t._v("事件名")]),t._v(" "),a("th",{staticStyle:{"text-align":"left"}},[t._v("说明")]),t._v(" "),a("th",{staticStyle:{"text-align":"left"}},[t._v("返回值")])])]),t._v(" "),a("tbody",[a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("select")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("选择菜单（Menu-item）时触发")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("name")])])])]),t._v(" "),a("h3",{attrs:{id:"menugroup-props"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menugroup-props"}},[t._v("#")]),t._v(" MenuGroup Props")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",{staticStyle:{"text-align":"left"}},[t._v("属性")]),t._v(" "),a("th",{staticStyle:{"text-align":"left"}},[t._v("说明")]),t._v(" "),a("th",{staticStyle:{"text-align":"left"}},[t._v("类型")]),t._v(" "),a("th",{staticStyle:{"text-align":"left"}},[t._v("默认值")])])]),t._v(" "),a("tbody",[a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("title")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("分组标题")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("String")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("空")])])])]),t._v(" "),a("h3",{attrs:{id:"submenu-props"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#submenu-props"}},[t._v("#")]),t._v(" SubMenu Props")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",{staticStyle:{"text-align":"left"}},[t._v("属性")]),t._v(" "),a("th",{staticStyle:{"text-align":"left"}},[t._v("说明")]),t._v(" "),a("th",{staticStyle:{"text-align":"left"}},[t._v("类型")]),t._v(" "),a("th",{staticStyle:{"text-align":"left"}},[t._v("默认值")])])]),t._v(" "),a("tbody",[a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("title")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("必填，唯一标识")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("Number/String")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("空")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("icon")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("图标，url 或者 base64数据")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("String")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("空")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("expand")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("默认是否展开")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("Boolean")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("false")])])])]),t._v(" "),a("h3",{attrs:{id:"menuitem-props"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menuitem-props"}},[t._v("#")]),t._v(" MenuItem props")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",{staticStyle:{"text-align":"left"}},[t._v("属性")]),t._v(" "),a("th",{staticStyle:{"text-align":"left"}},[t._v("说明")]),t._v(" "),a("th",{staticStyle:{"text-align":"left"}},[t._v("类型")]),t._v(" "),a("th",{staticStyle:{"text-align":"left"}},[t._v("默认值")])])]),t._v(" "),a("tbody",[a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("name")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("必填，唯一标识")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("Number/String")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("空")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("icon")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("图标，url 或者 base64数据")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("String")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("空")])])])])],1)}),[],!1,null,null,null);e.default=v.exports}}]);