# cap4-menu 组件 * * * 用于自定义门户布局框架的菜单组件 ### 基本用法 ``` <script> export default{ data () { return { "fold":false, "data" : { "shortCut" : [ { "menuList" : [{ "menuIcon" : "/fileUpload.do?method=showRTE&fileId=4674185107131156747&createDate=2018-5-2&type=image", "appId" : "5346801070781844789", "menuId" : "15252411841960", "menuName" : "有流程", "menuType" : "listCreate", "isUseCustomTemplate" : "0" } ], "appId" : "4198771627843666672", "menuId" : "6282397618325521949", "menuName" : "快速新建", "menuType" : "category" } ], "bussImg" : "vp-icon-severeSandStorm", "categoryMenu" : [...], "bussName" : "xms", "flowList" : [ { "appId" : "6014113484955537231,5346801070781844789", "menuId" : "5492484774340732977", "menuName" : "审批事项", "menuType" : "flowList", "isUseCustomTemplate" : "0" } ] } } }, methods: { click(item){ alert(`你点击了【${item.menuName}】`) } } } </script> <div style='width:800px;height:400px;position:relative;'> <Cap4Menu :data='data' @click='click' :fold='fold' :ctxPath="'http://10.5.5.204:8088/seeyon/'"> </Cap4Menu> <button @click='fold = !fold' style='position:absolute;top:0;left:154px;'>点击切换展示状态</button> <button @click='fold = !fold' style='position:absolute;top:0;left:154px;'>点击切换展示状态</button> </div> ``` ### Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | | --- | --- | --- | --- | --- | | data | 数据源，后端请求回来的数据，包括（flowList、shortCut、categoryMenu、bussName、bussImg） | Object | — | {} | | ctxPath | 用在图片请求时，需要传入的BaseUrl | string | — | "" | | fold | 是否折叠菜单 | Boolean | — | false | ### Event | 事件名称 | 说明 | 回调参数 | | --- | --- | --- | | click | 点击菜单项时触发 | 当前点击项 |