cgreact-layui/types/cgreact-type-menu.ts

CGReact基于Layui样式的组件库

/** MenuState数据结构定义*/
type CGReactMenuLine = {
    label?: string, //标签文字
    icon?: string, // 可以配置img的src路径，或者图标渲染
    budget?: true | number,//右上角红色表示，true渲染一个小圆点，number则渲染红色圆圈
    value?: string,//为选项绑定的一个变量，会在菜单的点击回调函数中传递
    select?: boolean,//菜单的选中情况
    onClick?: (value: string) => void //菜单的点击事件
    expandType?: "side" | "fold", //按钮组的展开方式可以是右侧弹出或者向下折叠
    expand?: boolean, //当前是否折叠，expandType为side时生效，需要通过点击事件展开折叠，fold状态下hover时自动展开，非悬停自动折叠
    child?: CGReactMenuItem //下层子菜单，支持嵌套
}
type CGReactMenuItem = { [key in string]: CGReactMenuLine | string };
type CGReactMenuState = {
    menuType?: "horizontal" | "vertical" | "popdown",//菜单类型可以是横纵向的navigator导航，也可以是弹出或者下拉菜单
    menuItem?: CGReactMenuItem
} //配置数据类型定义
interface MenuState extends CGReactMenuState {}

/* MenuProp数据类型*/
type CGReactMenuProp ={
    data?: CGReactMenuState, //元素state数据配置
    layout?:CGReactMenuLayout, //元素布局配置
    modal?: CGReactModalState | boolean,  //组件绑定的对话框数据结构
} ;//Prop是保持和Comp一致
type CGReactMenuLayout = {
    layoutDebug?: "debug-off" | "only-layout" | "with-content", //用于调试时显示布局的框子默认false不显示
    layoutName?: string, //布局的名称属性，渲染为item-name
    layoutHeight?: number | CGReactLength | CGReactGrid,//布局长度，垂直方向支持删格系统
    layoutWidth?: number | CGReactLength | CGReactGrid | MediaResponse,//布局宽度，水平方向支持删格系统，只有宽度才需要响应式布局
    align?: CGReactAlign, //布局相对于父布局的对其方式，其优先级高于父布局的gravity配置
}//meun可以配置的布局参数
interface MenuProp extends CGReactMenuProp, CGReactMenuLayout {}

/**回调函数数据类型*/
interface MenuConfig
{
    menuType: "horizontal" | "vertical" | "popdown",
    menuItem: Array<MenuItem>
}

interface MenuItem
{
    key: string, //标签的键名
    label: string, //标签文字
    icon: string, // 可以配置img的src路径，或者图标渲染
    level: number,//菜单级别
    budget: true | number,//右上角红色表示，true渲染一个小圆点，number则渲染红色圆圈
    value: string,//为选项绑定的一个变量，会在菜单的点击回调函数中传递
    onClick: (value: string) => void, //菜单的点击事件
    select: boolean,//菜单的选中情况
    showIndex: number, //菜单的叶子节点显示顺序，非叶子（隐藏）节点为-1
    expType: "fold" | "side", //菜单的展开类型
    expand: boolean, //当前是否折叠，代理同步到配置
    hover: boolean,//菜单是否展示悬停
    parent: MenuItem, //上层菜单
    child: Array<MenuItem> //下层子菜单，支持嵌套
}