手把手教你封装一个Modal组件

最新推荐文章于 2024-07-30 16:16:33 发布
最新推荐文章于 2024-07-30 16:16:33 发布
阅读量1.7k 收藏 1
点赞数
文章标签： javascript c# ViewUI
原文链接：https://juejin.im/post/5bb2e120e51d450e6548970a
版权

环境搭建

用 create-react-app 快速搭建一个 react 的开发环境，没有用过的童鞋可参考官网

目录

  1. 新建文件 src/modal/index.jsx, 并写入一段简单的测试代码
import React, { Component } from 'react';
import './index.css';
class Modal extends Component {
  render() {
    return <div className="modal">
      这是一个modal组件
    </div>
  }
}
export default Modal;
复制代码

  1. 新建文件 src/modal/index.css

  2. 修改 src/App.js, 引入 Modal 组件

import React, { Component } from 'react';
import Modal from './modal';
import './App.css';

class App extends Component {
  render() {
    return (
      <Modal / >
    );
  }
}

export default App;
复制代码
  1. 在命令行输入npm start，出现如下结果，则表示环境搭建成功

什么是 modal

  • 标题区
  • 内容区
  • 控制区
  • mask

modal 骨架实现

修改src/modal/index.jsx

import React from 'react';

export default class Modal extends React.Component {
	render() {
		return (
			<div>
				<div>
					<div>标题区</div>
					<div>内容区</div>
					<div>
						<button>取消</button>
						<button>确定</button>
					</div>
				</div>
				<div>mask</div>
			</div>
			)
	}
}
复制代码

modal 样式实现

修改src/modal/index.jsx

import React from 'react';

export default class Modal extends React.Component {
	render() {
		return (
			<div className='wrapper'>
				<div className='modal'>
					<div className='title'>标题区</div>
					<div className='content'>内容区</div>
					<div className='operator'>
						<button className='close'>取消</button>
						<button className='confirm'>确定</button>
					</div>
				</div>
				<div className='mask'>mask</div>
			</div>
			)
	}
}
复制代码

修改 src/modal/index.css

.modal {
	width: 300px;
	height: 200px;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 2000;
	background: #fff;
	border-radius: 2px;
	box-shadow:  inset 0 0 1px 0 #000;
}

.title {
	width: 100%;
	height: 50px;
	line-height: 50px;
	padding: 0 10px;
}

.content {
	width: 100%;
	height: 100px;
	padding: 0 10px;
}

.operator {
	width: 100%;
	height: 50px;

}

.close, .confirm {
	width: 50%;
	border: none;
	outline: none;
	color: #fff;
	background: #4CA791;
	cursor: pointer;
	
}
.close:active, .confirm:active {
	opacity: 0.6;
	transition: opacity 0.3s;
}

.mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #000;
	opacity: 0.6;
	z-index: 1000;
}
复制代码

效果如图所示：

modal 功能开发

先思考一下 modal 组件需要实现哪些基本功能：

  • 可以通过 visible 控制 modal 的显隐
  • 标题区 和 内容区 可以自定义显示内容
  • 点击取消关闭 modal, 同时会调用名为 onClose 的回调
  • 点击确认会调用名为 onConfirm 的回调，并关闭 modal
  • 点击蒙层 mask 关闭 modal
  • animate 字段可以开启/关闭动画

控制 modal 显隐

修改 src/modal/index.jsx

import React from 'react';

import './index.css';

export default class Modal extends React.Component {
	constructor(props) {
		super(props)
	}
	render() {
		// 通过父组件传递的 visible 控制显隐
		const { visible = true } = this.props
		return visible &&
		(
			<div className='wrapper'>
				<div className='modal'>
					<div className='title'>标题区</div>
					<div className='content'>内容区</div>
					<div className='operator'>
						<button className='close'>取消</button>
						<button className='confirm'>确定</button>
					</div>
				</div>
				<div className='mask'>mask</div>
			</div>
		)
	}
}
复制代码

修改 src/App.js, 通过一个 Button 来控制 modal 的显隐

import React, { Component, Fragment } from 'react';
import Modal from './modal';
import './App.css';


class App extends Component {
	constructor(props) {
		super(props)
		this.state = {
			visible: false,
		}
	}
	showModal = () => {
			this.setState({
				visible: true,
			});
	}
  render() {
  	const { visible } = this.state
    return (
    	<Fragment>
	    	<Modal visible={visible}/ >
	    	<button onClick={() => this.showModal()} style={{
	    		'background': '#4CA791',
	    		'color': '#fff',
	    		'border': 'none',
	    		'width': 300,
	    		'height': 50,
	    		'fontSize': 30,
	    	}}>切换显隐</button>
    	</Fragment>
      
    );
  }
}

export default App;

复制代码

标题区和内容区可自定义

修改 src/modal/index.jsx

import React from 'react';

import './index.css';

export default class Modal extends React.Component {
	constructor(props) {
		super(props)
	}
	render() {
		// 通过父组件传递的 visible 控制显隐
		const { visible = true, title, children } = this.props
		return visible &&
		(
			<div className='wrapper'>
				<div className='modal'>
					<div className='title'>{title}</div>
					<div className='content'>{children}</div>
					<div className='operator'>
						<button className='close'>取消</button>
						<button className='confirm'>确定</button>
					</div>
				</div>
				<div className='mask'>mask</div>
			</div>
		)
	}
}
复制代码

修改 src/App.js, 从外部传入自定义的 ‘title' 和 ‘content'

import React, { Component, Fragment } from 'react';
import Modal from './modal';
import './App.css';

class App extends Component {
	constructor(props) {
		super(props)
		this.state = {
			visible: false,
		}
	}
	showModal = () => {
			this.setState({
				visible: true,
			});
	}
  render() {
  	const { visible } = this.state
    return (
    	<Fragment>
	    	<Modal
	    	visible={visible}
	    	title='这是自定义的title'>
	    	这是自定义的content
	    	</Modal>
	    	<button onClick={() => this.showModal()} style={{
	    		'background': '#4CA791',
	    		'color': '#fff',
	    		'border': 'none',
	    		'width': 300,
	    		'height': 50,
	    		'fontSize': 30,
	    	}}>切换显隐</button>
    	</Fragment>
      
    );
  }
}

export default App;

复制代码

控制区功能及蒙层点击功能

  • 要实现点击取消按钮关闭 modal, 那么就需要在 modal 中维护一个状态，然后用这个状态来控制 modal 的显隐，好像可行
  • 但是前面我们是通过父组件的 visible 控制 modal 的显隐，似乎矛盾
  • 要结合起来，只通过 state 来控制 modal 的显隐，props 改变只会改变 state

修改 src/modal/index.jsx

import React from 'react';

import './index.css';

export default class Modal extends React.Component {
	constructor(props) {
		super(props)
		this.state = {
			visible: false
		}
	}
	
	// 首次渲染使用父组件的状态更新 modal 中的 visible 状态，只调用一次
	componentDidMount() {
		this.setState({
			visible: this.props.visible
		})
	}

	// 每次接收 props 就根据父组件的状态更新 modal 中的 visible 状态，首次渲染不会调用
	componentWillReceiveProps(props) {
		this.setState({
			visible: props.visible
		})
	}

	handleClose = () => {
		const { onClose } = this.props
		onClose && onClose()
		this.setState({
			visible: false
		})
	}
	handleConfirm = () => {
		const { onConfirm } = this.props
		onConfirm && onConfirm()
		this.setState({
			visible: false
		})
	}
	handleMask = () => {
		this.setState({
			visible: false
		})
	}
	render() {
		// 通过父组件传递的 visible 控制显隐
		const { title, children } = this.props

		const { visible = true } = this.state

		return visible &&
		(
			<div className='wrapper'>
				<div className='modal'>
					<div className='title'>{title}</div>
					<div className='content'>{children}</div>
					<div className='operator'>
						<button className='close' onClick={this.handleClose}>取消</button>
						<button className='confirm' onClick={this.handleConfirm}>确定</button>
					</div>
				</div>
				<div className='mask' onClick={this.handleMask}>mask</div>
			</div>
		)
	}
}
复制代码

修改 src/App.js, 从外部传入自定义的 onClose 和 onConfirm

import React, { Component, Fragment } from 'react';
import Modal from './modal';
import './App.css';



class App extends Component {
	constructor(props) {
		super(props)
		this.state = {
			visible: false,
		}
	}
	showModal = () => {
			this.setState({
				visible: true,
			});
	}
	onClose = () => {
		console.log('onClose');
	}
	onConfirm = () => {
		console.log('onConfirm');
	}
  render() {
  	const { visible } = this.state
    return (
    	<Fragment>
	    	<Modal
	    	visible={visible}
	    	title='这是自定义的title'
	    	onClose={this.onClose}
	    	onConfirm={this.onConfirm}
	    	>
	    	这是自定义的content
	    	</Modal>
	    	<button onClick={() => this.showModal()} style={{
	    		'background': '#4CA791',
	    		'color': '#fff',
	    		'border': 'none',
	    		'width': 300,
	    		'height': 50,
	    		'fontSize': 30,
	    	}}>切换显隐</button>
    	</Fragment>
      
    );
  }
}

export default App;

复制代码

转载于:https://juejin.im/post/5bb2e120e51d450e6548970a

weixin_34051201
关注
手把手教你以最简单的方式封装 Vue3 模态(Modal)类组件
qq_38414743的博客
06-23 2577
反馈型组件，是前端经常涉及的组件，它们允许向用户提供提醒、提供更多选项或添加额外信息，而不会弄乱主要内容。在 Vue 中 Modal 类组件使用通常分为两种方式 优点：定制化程度高、限制低，可以最大程度的发挥主管设计想法缺点：复用性差、使用频繁时需要定义多份 代码，代码冗余。 优点：数据独立与页面独立、复用性、通用性强、业务代码流程易懂、无法继承上下文缺点：涉及到定制化将很难处理，往往需要编写 字符串 / 代码说了那么多，也该进入主题了。在前端发展至今为止，这类组件的封装已经有了广泛的累积，其中函数调
手把手教你实现一个modal对话框
九阴与九阳
11-14 1900
需求： 1、点击一个按钮弹出对话框 2、对话框的事件能够被父组件捕捉 3、对话框里的内容能够随时改变 一、如何实现一个对话框 1.1 创建一个简单的对话框 &nbsp;&nbsp;&nbsp;&nbsp;简而言之，一个简单的对话框就是一个div（也可能是几个div），怎么创建呢？ function createModal () { //创建一个div var modalDiv = docume...
微信小程序 封装模态框modal组件（用法看描述中的博客）
02-28
微信小程序 自定义封装模态框modal组件，可以上下左右四个方向弹出；用法博客：https://blog.csdn.net/lianzhang861/article/details/88013556
vue封装一个简单的modal对话框
qq_55491577的博客
02-08 1135
在modal.vue中，我们在props中接受四个参数，title：标题，width：宽度， height：高度，top：距离顶部的高度，不传则是默认的值；并提供了两个具名插槽，header和footer，以及一个默认插槽slot显示里面的内容；并添加了三个自定义事件控制modal的显示和隐藏；点击右上角的xx, 取消、确定都会把对话框隐藏，并使用message组件提示用户 ，可以再这三个事件写自己的逻辑，比如点击确定发起请求等；通过外层的div控制组件的显示隐藏。点击打开modal那个按钮弹出对话框。
react组件学习——Modal组件
最新发布
AndrewPerfect的博客
07-30 466
Modal组件（也称为对话框或弹窗）是一种用户界面元素，用于在页面上显示额外的信息、进行交互或者获取用户输入，同时通常会暂时阻止用户与页面的其他部分交互。
react二次封装Modal和Drawer组件
weixin_43845137的博客
12-03 407
【代码】react二次封装Modal和Drawer组件。
封装全局modal
shadowfall的博客
01-12 314
封装modal等弹框模块的方法
模态框的封装
weixin_34050005的博客
10-12 310
在实际开发中，我们经常会用到模态框组件，因此封装一个模态框组件会是一个不错的方式 直接上代码，子组件modal.vue代码如下： <template> <div class="modal-shade"> <div class="my-modal"> <div class="modal-title...
《精通react/vue组件设计》之手把手实现一个轻量级可扩展的模态框(Modal)组件
趣谈前端
02-14 1566
前言本文是笔者写组件设计的第九篇文章, 今天带大家实现一个轻量级且可灵活配置组合的模态框(Modal)组件, 该组件在诸如Antd或者elementUI等第三方组件库中都会出现,主要用来...
精通React/Vue系列之手把手带你实现一个功能强大的通知提醒框(Notification)
趣谈前端
02-16 4668
前言本文是笔者写组件设计的第十篇文章, 今天带大家实现一个比较特殊的组件——通知提醒框(Notification)。 该组件在诸如Antd或者elementUI等第三方组件库中也都会出现...
从0到1教你搭建前端团队的组件系统（高级进阶必备）
趣谈前端
02-20 3198
前言随着vue/react这类以数据驱动为主的web框架的不断完善和壮大，越来越多的前端团队开始着手搭建内部的组件库。虽然目前市面上已经有很多功能强大且完善的组件库供我们使用，比如基于r...
react-modal-component:另一个基于 react 的模态对话框，但具有更简单的 api 并支持 react 风格的动画
06-09
React模态组件 另一个基于React的模态对话框，但具有更简单的 api 并支持React式动画。 灵感来自 。 示例用法 . fade-appear { opacity : 0 ; transition : opacity .5 s ease-in; } . fade-appear . fade-appear-active { opacity : 1 ; } . fade-leave { opacity : 1 ; transition : opacity .5 s ease-in; } . fade-leave . fade-leave-active { opacity : 0 ; } var Modal = require ( 'react-modal-component' ) ; var Component = React . createClass
基于原生JS封装的Modal对话框插件的示例代码
11-19
基于原生JS封装Modal对话框插件，具体内容如下所示：
React组件封装（一）---Modal
weixin_52199120的博客
08-07 1312
使用UI组件库确实是一种很好的选择，它提供了丰富的UI组件和工具，可以大大简化前端开发，然而，有时我们可能需要根据项目的具体需求进行一些自定义的组件封装，而不是仅仅局限于组件库提供的组件。在React中，封装组件是一种很常见的作法，可以提高代码的可复用性和可维护性。常见的组件封装有表单组件、模态框组件、通知组件、图片轮播图组件、下拉菜单组件等。但是它的逻辑有点繁琐，需要从父组件跳到子组件再跳到父组件…今天要写的是模态框组件。封装一个可复用的模态框组件，可以在不同的场景中使用，例如展示提示信息、确认操作等。
封装modal传值
qq_38482205的博客
05-12 251
1.modal.js exportfunctionuseFormModal<T=any,Q=any>(){ const[isShow,setIsShow]=useState(false); const[params,setParams]=useState<T>(); const[query,setQurey]=useState<Query<Q>>(); constopen=(p?:T,q?:Query&l...
使用ts 引入组件_Vue3丨TS丨7 个思路封装一个灵活的 Modal 对话框
weixin_36088083的博客
01-12 2600
(关注前端精，让你前端越来越精 ~ )先讲段话一个灵活的，足够抽象的组件可以使我们提高编码效率，规范代码，统一 UI 风格...，在 Vue3 中，我们以常见的 Modal 对话框组件为例，探讨几个思路点与实现。思考丨7个思路✅ 一个对话框需要的基本要素「标题，内容，确定/取消按钮」。内容需要灵活，所以可以是字符串，或一段 html 代码(也就是 slot )。✅ 对话框需要“跳出”，避...
组件封装--模态对话框
weixin_48674314的博客
12-03 588
首页新建一个子组件： <style lang="less" scoped> .p_text{ padding: 20px 20px; font-size: 18px; } .p_text_center{ padding: 20px 45px; font-size: 18px; text-align: center; } </style> <template> <div> <Modal footer-hide v-m
原生html中modal,基于原生JS封装的Modal对话框插件
weixin_29765949的博客
06-03 1638
基于原生JS封装Modal对话框插件原生JS封装Modal对话框插件，个人用来学习原理与思想，只有简单的基本框架的实现，可在此基础上添加更多配置项API配置//基本语法let modal = ModalPlugin({//提示的标题信息title:'系统提示',//内容模板 字符串 /模板字符串/DOM元素对象template:null,//自定义按钮信息buttons:[{//按钮文字text:...
Laravel学习笔记（31）Bootstraps部分模板学习（modal，component）
qj4865的博客
02-20 221
modal & component部件 b4-modal-default 注意，form一定要放在table外面，否则submit将没有反应。 <button data-toggle="modal" data-target="#modelId" type="button" class="btn btn-success">添加角色</button> @compon...
手把手教你实现Vue自定义弹窗Modal
现在，让我们看看如何实现一个简单的Vue Modal组件： ```html <span>{{ msg }} <!-- 可以添加关闭按钮 --> 关闭 export default { props: { type: String, // 类型，用于设置不同的样式 msg: ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值