“弹窗”是如何开发的？用状态驱动还是命令式？

本篇文章给大家带来了关于前端开发弹窗的相关知识，其中主要介绍了前端开发工程师如何快捷高效的开发弹窗，感兴趣的朋友，下面一起来看一下吧，希望对大家有帮助。

作为一名前端开发工程师，开发各种弹窗是家常便饭，但如何快捷高效、风格统一是一个问题。

状态驱动

在现如今前端技术栈都是 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
		}
	}
}