基础按钮

前言

在网页的交互中，最基础最常用的，我认为是按钮，在我的开发经验中，按钮的交互无外乎以下 4 中。

按钮的交互类型

1. 点击立刻产生交互，同步按钮
2. 点击后需要等待一段时间才能产生交互，异步按钮
3. 双击后才能产生交互，双击按钮
4. 长按后需要确认才能产生交互，长按按钮

在这个基础上，我封装了一个我认为比较好用的按钮组件。

按钮组件

按钮

按钮源码

import { FC, useState, useRef } from "react";
import { motion } from "framer-motion";
import styles from "./Button.module.css";
interface CommonButton {
    children: any; // 按钮文字
    onDoubleClick?: (e: any) => void; // 双击事件
    onLongPress?: (e: any) => void; // 长按事件
    longPressTime?: number; // 长按触发时间(ms)
    style?: React.CSSProperties; // 样式
    className?: string; // 类名
}

interface SyncButtonProps extends CommonButton {
    onClick?: (e: any) => void; // 点击事件
    onAsyncClick?: never;
};

interface AsyncButtonProps extends CommonButton {
    onAsyncClick?: (e: any) => Promise<any>; // 异步点击事件
    onClick?: never;
};

type ButtonProps = SyncButtonProps | AsyncButtonProps;

const LoadingContent = () => {
    return (
        <div className={styles.loadingContent}>
            {[...Array(6)].map((_, index) => (
                <motion.div
                    key={index}
                    className={styles.loadingDot}
                    animate={{
                        scale: [1, 1.2, 1],
                        opacity: [0.5, 1, 0.5]
                    }}
                    transition={{
                        duration: 1,
                        repeat: Infinity,
                        delay: index * 0.1,
                        ease: "easeInOut"
                    }}
                />
            ))}
        </div>
    );
};

const Button: FC<ButtonProps> = (props) => {
    const {
        className,
        style,
        children,
        onClick,
        onAsyncClick = () => { return Promise.resolve() },
        onDoubleClick = () => { },
        onLongPress,
        longPressTime = 1500 // 默认1.5s触发长按
    } = props

    const [S_loading, setS_loading] = useState<boolean>(false)
    const pressTimer = useRef<NodeJS.Timeout | null>(null);
    const [isLongPress, setIsLongPress] = useState(false);
    const [isShaking, setIsShaking] = useState(false);
    const [animationKey, setAnimationKey] = useState(0);

    const handleMouseDown = (event: React.MouseEvent) => {
        if (onLongPress) {
            // 0.4s后开始抖动
            setTimeout(() => {
                setIsShaking(true);
            }, 400);

            // 1s后触发长按事件
            pressTimer.current = setTimeout(() => {
                setIsLongPress(true);
                onLongPress(event);
                // 触发动画重置
                setAnimationKey(prev => prev + 1);
                setIsShaking(false);
            }, longPressTime);
        }
    };

    const handleMouseUp = () => {
        if (pressTimer.current) {
            clearTimeout(pressTimer.current);
            pressTimer.current = null;
        }
        setIsLongPress(false);
        setIsShaking(false);
    };

    const handleMouseLeave = () => {
        if (pressTimer.current) {
            clearTimeout(pressTimer.current);
            pressTimer.current = null;
        }
        setIsLongPress(false);
        setIsShaking(false);
    };

    return <motion.button
        key={animationKey}
        className={`${styles.buttonGradient} ${S_loading ? styles.loading : ''} ${isLongPress ? styles.longPress : ''} ${className}`}
        style={style}
        onMouseDown={handleMouseDown}
        onMouseUp={handleMouseUp}
        onMouseLeave={handleMouseLeave}
        whileTap={{ scale: 0.95 }}
        initial={{ scale: 1, backgroundColor: "#0090ff" }}
        animate={isShaking ? {
            x: [0, -2, 2, -2, 2, 0],
            scale: 0.95,
            backgroundColor: "#0077cc"
        } : {
            scale: 1,
            backgroundColor: "#0090ff"
        }}
        transition={{
            duration: 0.2,
            ease: "easeInOut",
            x: {
                duration: 0.2,
                repeat: Infinity,
                repeatType: "reverse"
            }
        }}
        onClick={(event) => {
            if (S_loading) { // 加载的时候点击事件不生效
                return
            }
            if (onClick) {
                onClick(event)
            }
            else if (onAsyncClick) {
                setS_loading(true)
                onAsyncClick(event).finally(() => {
                    setS_loading(false)
                })
            }
        }}
        onDoubleClick={onDoubleClick}
    >
        {
            !S_loading && children
        }
        {/* 加载的动态 */}
        {S_loading && <LoadingContent />}
    </motion.button >
};

export default Button;

CSS 样式

.buttonGradient {
    background: #0090ff;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 24px;
    min-width: 80px;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.2s;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
}

.buttonGradient:hover {
    filter: brightness(1.08);
}

.buttonGradient:disabled {
    background: #e5e7eb;
    color: #aaa;
    cursor: not-allowed;
}

.loadingContent {
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;

}

.loadingContent .loadingDot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #fff;
}

.longPress {
    box-shadow: 0 0 0 4px rgba(0, 144, 255, 0.2);
    transform-origin: center;
}

.longPress::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
    opacity: 0;
    animation: ripple 0.5s ease-out;
}

@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 0.5;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}