react全局消息弹出框组件

最新推荐文章于 2024-02-05 02:23:43 发布

Jedi Hongbin

最新推荐文章于 2024-02-05 02:23:43 发布

阅读量1k

点赞数

分类专栏： react 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/printf_hello/article/details/126897696

版权

react 专栏收录该内容

82 篇文章 5 订阅

订阅专栏

在这里插入图片描述
v1.0
用法
1 注入 <MessageBar />

function MyApp({ Component, pageProps }: AppProps) {
   
    return (
        <ThemeProvider>
            <MessageBar />
            <GlobalStyle />
            <Component {...pageProps} />
        </ThemeProvider>
    );
}

2 任何位置调用方法可传入组件或字符串和显示时长

useEffect(() => {
    if (enter) {
        showMessage(<strong>点击屏幕开始浏览！</strong>, 1000);
    }
}, [enter]);

组件代码

/*
 * @Author: hongbin
 * @Date: 2022-09-16 20:24:16
 * @LastEditors: hongbin
 * @LastEditTime: 2022-09-16 20:58:06
 * @Description:消息条
 */
import { createRef, FC, useCallback, useImperativeHandle, useRef, useState } from "react";
import styled from "styled-components";

interface IShowMessage {
    (
        /**
         * 提示信息
         */
        message: string | JSX.Element,
        /**
         * 持续时间 默认 300ms
         */
        duration?: number
    ): void;
}

interface MessageBarRef {
    showMessage: IShowMessage;
}

const ref = createRef<MessageBarRef>();

export const showMessage: IShowMessage = (...rest) => {
    ref.current?.showMessage(...rest);
    console.log(ref.current);
};

const opacityDuration = 300;

interface IProps {}

const MessageBar: FC<IProps> = () => {
    const [isShow, _setIsShow] = useState(false);
    const [message, _setMessage] = useState<Parameters<IShowMessage>[0]>("message");
    const timer = useRef<NodeJS.Timeout>();

    const showMessage: MessageBarRef["showMessage"] = useCallback((msg, duration = 300) => {
        clearTimeout(timer.current);
        _setIsShow(true);
        _setMessage(msg);
        timer.current = setTimeout(() => {
            _setIsShow(false);
            //不算显示消息条时间
        }, duration + opacityDuration);
    }, []);

    useImperativeHandle(
        ref,
        () => ({
            showMessage,
        }),
        [showMessage]
    );

    return <Container isShow={isShow}>{message}</Container>;
};

export default MessageBar;

const Container = styled.div<{ isShow: boolean }>`
    position: fixed;
    top: 10vh;
    left: 50vw;
    transform: translateX(-50%);
    background: #00000077;
    color: #fff;
    padding: 1vmin 1vmax;
    border-radius: 0.5vmin;
    letter-spacing: 1px;
    box-shadow: 3px 4px 12px 0px #0000008c;
    display: flex;
    justify-content: center;
    align-items: center;
    transition-property: opacity, visibility;
    transition-duration: ${opacityDuration / 1000}s;
    opacity: ${({ isShow }) => +isShow};
    visibility: ${({ isShow }) => (isShow ? "visible" : "hidden")};
    z-index: 99999999;
    user-select: none;
`;