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

CGReact基于Layui样式的组件库

/** ButtonState相关手数据结构*/
type CGReactButtonTheme = "default" | "normal" | "warm" | "danger" | "black"; //主题配置选项
type CGReactButtonSize = "default" | "large" | "small" | "mini"; //大小配置选项
type CGReactButtonState = ({//Button或者ButtonGroup的配置，当label有多个（数组）时渲染ButtonGroup
    type?: "button" | "submit" | "reset" | "file", //默认是button
    label?: string | "CGReact按钮" | Array<string | "按钮A" | "按钮B" | "按钮C">, //设置按钮的文字，传多个则生成按钮组
    primary?: boolean | Array<boolean>, // 设置按钮为线框模式，默认false
    size?: CGReactButtonSize, //按钮的大小
} | {
    type?: "checkBtn" | "checkbox",//check系列
    label?: string | "CGReact复选框" | Array<string | "复选框A" | "复选框B" | "复选框C">,//复选框标签
    value?: string | Array<string>,//对应的值，如果不配置则禁用对应的复选框
    select?: Array<string>, //仅对checkBtn，checkBox和radio生效，默认选中的值
} | {
    type?: "radio",//check和radio
    label?: string | "CGReact单选框" | Array<string | "单选框A" | "单选框B" | "单选框C">,//单选框标签
    value?: string | Array<string>,//对应的值，如果不配置则禁用对应的单选框
    select?: string, //选中的值
} | {
    type?: "switch", //type必须是switch
    label?: string | "ON|OFF" | "开|关"
    valueON?: string, //开启的值配置
    valueOFF?: string,//关闭的值配置
    select?: string, //选中的值
}) & {
    //公共属性
    theme?: CGReactButtonTheme | Array<CGReactButtonTheme>,// 按钮主题样式
    icon?: CGReactIconType | Array<CGReactIconType>,//按钮或选择框图标
    radius?: boolean, // 设置按钮圆角
    fluid?: boolean // 流体按钮，自适应占满一行
    disable?: boolean | Array<boolean>, //设置按钮是否处于激活状态，默认false
    margin?: number,//按钮间距，只有group才生效
    formItem?: CGReactFormItem | boolean,//表单item配置
    onClick?: Function | Array<Function> // 回调函数，也可以直接配置onClick作为prop参数
}//@ts-ignore ButtonState回调接口
interface ButtonState extends CGReactButtonState
{
    valueOFF: any;
    valueON: any;
    // this.state回调接口数据类型
    type: "button" | "submit" | "reset" | "file" | "radio" | "checkBtn" | "checkbox" | "switch", // 按钮类型
    label: string | string[];//按钮标签
    value: string | string[];//对应的表单值
    select: string | Array<string>;//默认选中的值
    primary: boolean | Array<boolean>;//按钮线框模式
    size: CGReactButtonSize;//按钮大小
    theme: CGReactButtonTheme | Array<CGReactButtonTheme>;// 按钮主题样式
    icon: CGReactIconType | Array<CGReactIconType>;//按钮图标
    disable: boolean | Array<boolean>;//按钮禁用
    radius: boolean; // 设置按钮圆角
    margin: number;//按钮间距，只有group才生效
    formItem: CGReactFormItem;//表单item配置
    onClick: Function | Array<Function> // 回调函数
}

/** ButtonProps在CGReactCompProp的基础上以button配置作为data的数据类型*/
type CGReactButtonLayout = {
    layoutName?: string, //布局的名称属性，渲染为item-name
    layoutWidth?: number | CGReactLength | CGReactGrid | MediaResponse,//布局宽度，水平方向支持删格系统，只有宽度才需要响应式布局
    align?: CGReactAlign, //布局相对于父布局的对其方式，其优先级高于父布局的gravity配置
    layoutDebug?: "debug-off" | "only-layout" | "with-content", //用于调试时显示布局的框子默认false不显示，如果没有配置，子Layout会自动同步父Layout的配置
}
type CGReactButtonProp = {
    direction?: "horizontal" | "vertical", //布局的方向属性
    data?: CGReactButtonState //使用Button数据类型
    onClick?: Function | Array<Function>, //事件回调函数
    layout?: CGReactButtonLayout //布局定义
    children?:any
} //参数类型
interface ButtonProps extends CGReactButtonProp, CGReactButtonLayout {}

/** 回调接口数据类型，可能在state数据类型中交叉使用*/
interface ButtonConfig //renderButton函数回调接口数据类型
{
    type: "button" | "submit" | "reset" | "file" | "radio" | "checkBtn" | "checkbox" | "switch", // 按钮类型
    disable: boolean, // 按钮是否处于激活状态
    icon: CGReactIconType,//按钮图标
    theme: CGReactButtonTheme,// 按钮主题样式
    radius: boolean, // 设置按钮圆角
    margin?: number,//按钮间距
}//按钮基础类配置接口
interface SimpleButtonConfig extends ButtonConfig
{
    type: "button" | "submit" | "reset" | "file",
    label: string, // 按钮的文字
    primary: boolean, // 设置按钮为线框模式
    size: CGReactButtonSize, //按钮的大小
    onClick: Function // 回调事件
}//普通按钮配置
interface CheckButtonConfig extends ButtonConfig
{
    type: "checkbox" | "checkBtn",
    label: string, // 按钮的文字
    value: string, //checkbox或者radio的值
    checked: boolean, // 是否选中状态
}//复选按钮配置
interface RadioButtonConfig extends ButtonConfig
{
    type: "radio",
    label: string, // 按钮的文字
    value: string, //checkbox或者radio的值
    checked: boolean, // 是否选中状态
}//单选按钮配置
interface SwitchButtonConfig extends ButtonConfig
{
    type: "switch",
    labelON: string,
    labelOFF: string
    valueON: string,
    valueOFF: string,
    checked: boolean, // 是否选中状态
}