site_8g/src/components/ButtonOwn/index.tsx

"use client";
import clsx from "clsx";
import { CSSProperties, FC, PropsWithChildren } from "react";
import styles from "./style.module.scss";

/**
 * @description 自定义button按钮
 * @param {any} children 插槽内容
 * @param {boolean} active 是否高亮
 * @param {() => void} callbackFun 回调方法
 */
export interface ButtonOwnProps {
    children?: any;
    active?: boolean;
    callbackFun?: () => void;
    className?: string;
    style?: CSSProperties;
    [props: string]: any;
}

const ButtonOwn: FC<PropsWithChildren<ButtonOwnProps>> = ({
    children = "",
    active = false,
    deposit = false,
    callbackFun,
    className,
    style,
    ...other
}) => {
    const divClassName = clsx(
        {
            [styles.button]: true,
            [styles.active]: active,
            [styles.deposit]: deposit,
        },
        className
    );

    return (
        <button
            style={style}
            className={divClassName}
            {...other}
            onClick={() => (active || deposit) && callbackFun && callbackFun()}
        >
            {children}
        </button>
    );
};

export default ButtonOwn;