做网站 然后百度推广,营销型类型网站有哪些类型,杭州网站设计,用仿站工具做网站自定义组件是每个前端开发者必备的技能。我们在使用现有框架时难免有一些超乎框架以处的特别的需求#xff0c;比如关于弹窗#xff0c;每个应用都会用到#xff0c;但是有时我们使用的框架中提供的弹窗功能也是功能有限#xff0c;无法满足我们的应用需求#xff0c;今天…自定义组件是每个前端开发者必备的技能。我们在使用现有框架时难免有一些超乎框架以处的特别的需求比如关于弹窗每个应用都会用到但是有时我们使用的框架中提供的弹窗功能也是功能有限无法满足我们的应用需求今天 我来讲一下在React中如何自定义各种样式的弹窗。相信通过这篇文章你能在自定义组件方面技能有一个质的提升。相关的知识能够掌握的更加牢固。
先看最终的效果
首先本实例都是在MUI及基础上设计的样式部分我使用了emotion-react。
弹窗的设计有两种方案一种是直接把弹窗组件嵌入到页面中用的时候让它直接显示或关闭即可一般的UI框架都是采用这种方法。这种使用方法有一个好处是不受浏览器插件的影响尤其是广告拦截插件的影响。但使用上有点不方便必须要在使用弹窗的组件中加入这个弹窗使用上不太方便。另一种方案是动态创建弹窗组件在使用的时候直接alert就可以了。就像使用js原生的弹窗一样简单。本篇文章就是围绕这种设计思路设计一个优雅的弹窗组件。
弹窗遮罩
遮罩很简单就一个div, 在MUI里就是一个Box组件。
const maskCss cssposition: fixed;background-color: rgba(0,0,0,0.6);border-radius: 5px;top: 0px;left: 0px;width: 100%;height: 100%;overflow: hidden;z-index: 999;display: flex;justify-content: center;align-items: center;;这是遮罩的样式我直接赋于一个Box就好了。
/** jsxImportSource emotion/react */
import { css, jsx, keyframes } from emotion/react
import { useState, useRef, useEffect, useCallback } from react;
import Box from mui/material/Box;export default function Model(props) {return (Box css{maskCss}/Box)
}我们再来临时创建一个简单的弹窗主体
/** jsxImportSource emotion/react */
import { css, jsx, keyframes } from emotion/react
import React, { useState } from react;
import Box from mui/material/Box;const maskCss cssposition: fixed;background-color: rgba(0,0,0,0.6);border-radius: 5px;top: 0px;left: 0px;width: 100%;height: 100%;overflow: hidden;z-index: 999;display: flex;justify-content: center;align-items: center;;const modelCss cssposition: relative;background-color: white;border: 1px solid #ccc;border-radius: 5px;overflow: hidden;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);width: 400px;height: 300px;const titleCss cssbackground-color: #f0f0f0;padding: 8px;cursor: move;;const modelContentCss csspadding: 16px;;const Modal (props) {const {onClose} props;const onClick (e) { console.log(target:, e.target.className);}return (Box css{maskCss}onClick {onClose}Box css{modelCss}Boxcss{titleCss}className.modelHandler这是标题/BoxBox css{modelContentCss}这是弹窗内容/Box/Box/Box);
};export default Modal;
这是一个简单的弹窗如何让它弹出来呢。我的想法是动态的把这个弹窗插入到document的body
// 创建一个div容器,作为弹窗的根节点
const modelContainer document.createElement(div);// 将div容器添加到body中
document.body.appendChild(modelContainer);上面我只是创建了一个dom节点但我们必须把这个dom节点添加到React中才能真实的渲染出来。
// 创建一个根节点
const modelRoot ReactDOM.createRoot(modelContainer);然后渲染出来
modelRoot.render(Model /
);这样就在body中插入了model组件了并且能渲染出来。当然能挂载我们还要有卸载才行。很简单
// 卸载事件
const unmountEvent () {modelContainer.remove();
}我们将上面的弹窗方法整合成一个hook就好了这样调用起来就相当的哇塞了。
import ReactDOM from react-dom/client;
import Model from ./_Model;//可高度自定义的统一弹窗。
export default function useAlert() {return (configure) {// 创建一个div容器,作为弹窗的根节点const modelContainer document.createElement(div);// 将div容器添加到body中document.body.appendChild(modelContainer);// 创建一个根节点const modelRoot ReactDOM.createRoot(modelContainer);// 卸载事件const unmountEvent () {modelContainer.remove();}modelRoot.render(ModelonClose{unmountEvent}{...configure}{configure.component || null}/Model);}}我们把卸载事件传递给了Model在遮罩点击事件上调用这样就能开发弹窗也能关闭弹窗。
我们这样调用就好了
const alert useAlert();
alert();你看一个基本的弹窗就设计完了。
