# 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 | 点击菜单项时触发 | 当前点击项 |
编撰人：yinyanting
