一、弹出层
弹出层一般用于提示消息、展示菜单或操作面板，并且通常需要覆盖整个页面或部分区域。vue中实现弹出层需要用到动态组件和slot（插槽）。
创建弹出层组件首先，我们需要创建一个弹出层组件。在此，我们创建一个名为modal的弹出层组件，并包含一个插槽（slot），用于动态加载需要显示的内容。
<template> <div class="modal-container" v-show="show"> <div class="modal-content"> <slot></slot> </div> </div></template><script>export default { name: 'modal', props: { show: { type: boolean, default: false } }}</script><style scoped>.modal-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center;}.modal-content { background-color: #fff; padding: 20px;}</style>
在上面的代码中，我们首先定义了一个名为modal的组件，并传入了一个名为show的 props，该属性用于控制弹出层是否显示。在组件模板中，我们使用了动态插槽（slot）来展示弹出层中需要显示的内容。然后，我们设置了一些样式，使弹出层能够居中显示，并添加半透明的背景色。
在需要显示弹出层的组件中使用modal组件接下来，我们需要在需要显示弹出层的组件中使用modal组件。在此，我们创建一个名为app的根组件，并在该组件中添加一个按钮，用于触发显示弹出层。
<template> <div class="app"> <button @click="showmodal = !showmodal">显示弹出层</button> <modal v-bind:show="showmodal"> <p>这是弹出层中的内容</p> </modal> </div></template><script>import modal from './components/modal.vue'export default { name: 'app', components: { modal }, data() { return { showmodal: false } }}</script><style>.app { padding: 20px;}</style>
在上面的代码中，我们首先导入了之前定义的modal组件，并在组件模板中添加了一个按钮，用于触发显示弹出层。然后，我们使用v-bind指令将showmodal属性绑定到modal组件的show属性上。最后，我们将需要在弹出层中展示的内容放置在modal组件的插槽中。
二、模态框
模态框通常用于提示用户需要进行确认或选择，同时防止用户在进行操作之前进行其他操作。与弹出层类似，vue中实现模态框也需要用到动态组件和slot。
创建模态框组件首先，我们需要创建一个模态框组件。在此，我们创建一个名为confirmation的模态框组件，并包含两个插槽（slot），一个用于展示提示信息，另一个用于展示确认和取消按钮。
<template> <div class="modal-container" v-show="show"> <div class="modal-content"> <div class="modal-body"> <slot name="body"></slot> </div> <div class="modal-footer"> <slot name="footer"> <button @click="cancel">取消</button> <button @click="confirm">确认</button> </slot> </div> </div> </div></template><script>export default { name: 'confirmation', props: { show: { type: boolean, default: false }, oncancel: function, onconfirm: function }, methods: { cancel() { this.oncancel && this.oncancel() }, confirm() { this.onconfirm && this.onconfirm() } }}</script><style scoped>.modal-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center;}.modal-content { background-color: #fff; padding: 20px;}.modal-footer { display: flex; justify-content: flex-end; margin-top: 20px;}.modal-footer button { margin-left: 10px;}</style>
在上面的代码中，我们创建了一个名为confirmation的模态框组件，并传入了名为show、oncancel和onconfirm的属性，分别用于控制模态框是否显示、取消操作和确认操作。在组件模板中，我们使用了两个插槽（slot），一个用于展示提示信息，一个用于展示确认和取消按钮。在方法中，我们定义了cancel和confirm方法用于处理取消和确认操作，并在这些方法中触发父组件传递的回调函数。
在需要显示模态框的组件中使用confirmation组件接下来，我们需要在需要显示模态框的组件中使用confirmation组件。在此，我们创建一个名为app的根组件，并在该组件中添加一个按钮，用于触发confirmation组件显示模态框。
<template> <div class="app"> <button @click="showmodal = !showmodal">显示模态框</button> <confirmation v-bind:show="showmodal" v-bind:oncancel="cancel" v-bind:onconfirm="confirm" > <template v-slot:body> <p>确定要删除吗？</p> </template> </confirmation> </div></template><script>import confirmation from './components/confirmation.vue'export default { name: 'app', components: { confirmation }, data() { return { showmodal: false } }, methods: { cancel() { this.showmodal = false }, confirm() { alert('删除成功！') this.showmodal = false } }}</script><style>.app { padding: 20px;}</style>
在上面的代码中，我们将confirmation组件作为模态框组件使用，并将showmodal属性、cancel方法和confirm方法绑定到confirmation组件的属性上。在confirmation组件的插槽中，我们展示了要显示的提示信息。在vue的模板中，我们使用v-slot指令来定义在confirmation组件中使用的插槽，以及插槽的名称（body）。在父组件中，我们定义了cancel方法和confirm方法用于处理取消和确认操作，并在确认操作中提示用户删除成功。
总结
在vue中实现弹出层和模态框需要使用动态组件和slot。通过将组件作为弹出层或模态框使用，我们可以很方便地实现这些常见的ui组件。同时，通过将回调函数传递给子组件，我们可以轻松地处理子组件中的用户操作，并将结果反馈给父组件。
以上就是vue 中如何实现弹出层及模态框？的详细内容。