这篇“web前端中弹窗是怎么开发的”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“web前端中弹窗是怎么开发的”文章吧。
状态驱动
在现如今前端技术栈都是 Vue、 React 的情况下，使用状态驱动是一种常用方式。比如我们页面要引入一个弹窗，点击某个按钮弹出：
<template>
<div>
<Modal1 v-show="visible" @close="closeModal" />
<button @click="showModal" >click</button>
</div>
</template>
<script>
import Modal1 from './modals/Modal1.vue'
export default {
components: { Modal1 },
data() {
return {
visible: false
}
},
methods: {
// 弹出弹窗
showModal(){
this.visible = true
},
// 关闭弹窗，并传回数据
closeModal(data) {
this.visible = false
// 拿到 data todo something
}
}
}
以上有一个问题，控制弹窗显隐的变量、显示弹窗的逻辑、关闭弹窗的回调逻辑分散在不同的地方。
假设这个页面有不止一个弹窗，那么这样写：
<template>
<div>
<Modal1 v-show="visible1" @close="closeModal1" />
<Modal2 v-show="visible2" @close="closeModal2" />
<Modal3 v-show="visible3" @close="closeModal3" />
<button @click="showModal1" >click</button>
<button @click="showModal2" >click</button>
<button @click="showModal3" >click</button>
</div>
</template>
<script>
import Modal1 from './modals/Modal1.vue'
import Modal2 from './modals/Modal2.vue'
import Modal3 from './modals/Modal3.vue'
export default {
components: { Modal1, Modal2, Modal3 },
data() {
return {
visible1: false,
visible2: false,
visible3: false,
}
},
methods: {
// 弹出弹窗
showModal1(){
this.visible1 = true
},
// 关闭弹窗，并传回数据
closeModal1(data) {
this.visible1 = false
// 拿到 data todo something
},
showModal2(){
this.visible2 = true
},
// 关闭弹窗，并传回数据
closeModal2(data) {
this.visible2 = false
// 拿到 data todo something
},
showModal3(){
this.visible3 = true
},
// 关闭弹窗，并传回数据
closeModal3(data) {
this.visible3 = false
// 拿到 data todo something
},
}
}
这样写起来简直不要太啰嗦。
命令式开发（函数式）
我开发了 promise-modal 这个库，可以在 React 项目中 Promise 函数式的开发调用弹窗。
安装
npm i promise-modal
使用
你的 Modal 组件这样写，我们会传入 callbackResolve和 callbackReject 两个 props 到你的组件中，你需要在关闭 Modal 的时候调用它们。
import React, { useState } from 'react'
import { Modal, Button } from 'antd'
import PropTypes from 'prop-types'
const TestModal = (props) => {
const { title, callbackResolve, callbackReject } = props
const [isModalVisible, setIsModalVisible] = useState(true)
const handleOk = () => {
setIsModalVisible(false)
callbackResolve(true)
}
const handleCancel = () => {
setIsModalVisible(false)
callbackReject(false)
}
return (
<Modal destroyOnClose title={title} visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
<p>Some contents...</p>
<p>Some contents...</p>
</Modal>
)
}
TestModal.propTypes = {
title: PropTypes.string.isRequired,
callbackResolve: PropTypes.func.isRequired,
callbackReject: PropTypes.func.isRequired,
}
export default TestModal
把你的 Modal 组件传入 create 函数
import { create } from 'promise-modal'
import TestModal from './TestModal'
// 如果你使用 Class 组件
export default (data) => create(TestModal, data)
// 如果你使用函数式组件和 hooks，你必须创建一个自定义 hooks 返回
export const useTestModal = () => {
const showTestModal = (data) => create(TestModal, data)
return showTestModal
}
业务代码中使用 Modal，像 Promise 函数一样。
import { useTestModal } from './modals/TestModal'
const showTestModal = useTestModal()
// use Promise.then
showTestModal({
title: 'Test Modal',
})
.then((response) => {
console.log('response: ', response)
})
.catch((error) => {
console.log('error: ', error)
})
// use await
const res = await showTestModal({
title: 'Test Modal',
})
console.log('res: ', res)
// do something here
以上就是关于“web前端中弹窗是怎么开发的”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网行业资讯频道。
