纯Tailwind 实现消息弹窗 + 优美对话框

前言

使用纯tailwind实现消息弹窗和优美对话框，不得不说tailwind真的很方便的嗷 用习惯了就觉得很顺手，哈哈

一、效果

话不多说，直接上图：

二、源码 

2.1、引入库

import { NavBar } from "@nutui/nutui-react";
import { useReactive } from "ahooks";
import { useState } from "react";

2.2、使用

代码如下（示例）：

"use client"
import { NavBar } from "@nutui/nutui-react";
import { useReactive } from "ahooks";
import { useState } from "react";

function Demo() {

    const state = useReactive<{
        notice: boolean,
        visible: boolean
    }>({
        notice: false,
        visible: false,
    })

    const [visible, setVisible] = useState<boolean>(false)

    return (
        <div className="w-full bg-gray-07-l h-full overflow-auto no-scrollbar" }}>
            <NavBar
                className=''
                style={{ marginBottom: 0 }}
            >
                <div className='w-24 text-nowrap text-xl'>Demo</div>
                <img src="/icons/svg/ling.svg" onClick={() => state.notice = true} width={20} height={20} alt="" />
            </NavBar>
           
            {/* <div className="flex items-center justify-between bg-white p-2 rounded-lg ">

                <div className="flex items-center">
                    <img src="/icons/svg/msg1.svg" className="mr-2" width={40} height={40} alt="" />
                    <h1 className="text-gray-00 text-md">消息弹出框 + 优美对话框</h1>
                </div>
                <div className="text-md text-main-02">关闭</div>
            </div> */}


            {/* 消息通知  定位可根据情况自行调整嗷*/}
            <div className="text-gray-00 tran fixed z-20 h-[52px] -top-2 w-full pl-4 pr-4 bg-white transition-all  duration-300 ease-in"
                style={{
                    transform: state.notice ? 'translateY(30%)' : 'translateY(-100%)',
                }}>
                <div className='flex items-center justify-between p-2 bg-white shadow-md rounded-lg'>
                    <div className='flex items-center' onClick={() => {
                        state.notice = false
                        setVisible(true)
                    }}>

                        < img src="/icons/svg/msg1.svg" className='mr-2' width={40} height={40} alt="" />
                        <h1 className="text-gray-00 text-md">消息弹出框 + 优美对话框</h1>
                    </div>
                    <div className='text-main-02 text-md flashing ' onClick={() => state.notice = false}>关闭</div>
                </div >
            </div >


            {/* 提示弹出框 */}
            {visible && <div className='w-full mx-auto h-[80%] fixed z-10 flex items-center justify-center'>
                <div className='w-[258px] h-min-[180px]  overflow-auto  shadow-lg bg-white rounded-lg '>
                    <div className=' p-4'>
                        <p className='text-lg text-gray-00  text-center mb-2'>提示信息标题</p >
                        <div className=' text-gray-05 text-center text-md'>提示内容详细文字信息，最多一共可以有3行文字</div>
                    </div>
                    <div className='flex  w-full border-t-[1px] border-gray-06-l'>
                        <button className='flashing rounded-bl-lg border-r-[0.5px] border-gray-06-l text-main-02 w-full pt-4 pb-4' onClick={() => {
                            setVisible(false)
                        }}>取消</button>
                        <button className='flashing rounded-br-lg  text-main-02 font-semibold w-full pt-4 pb-4' onClick={() => {
                            setVisible(false)
                        }}>确认</button>
                    </div>
                </div>
            </div>}

        </div>
    );
}

export default Demo;

总结

刚好写到这个，看着效果挺好就记录一下，比较简单~