面试题分享之封装一个弹框组件

简介: 面试题分享之封装一个弹框组件


题目

题目为: vue3中实现一个父页面的弹窗功能,描述显隐和传参的实现逻辑,(效果截图和关键代码截图)

大概的解题思路

  1. 创建一个弹框组件弹框.vue 存放于components目录下
  2. 使用defineProps用来获取在父组件中给当前弹框组件传递的值.
  3. 使用defineEmits用来将子组件中事件提供给父组件使用.

明确一个弹框组件应该有哪些结构

  • header_title: 左上角标题
  • main_content: 中间弹框的内容
  • footer_operation: 底部操作栏
  • 取消.
  • 确认.

其中 标题和内容由父组件传递, 而取消和确认事件需要提供给父组件使用.

操作

弹框组件的定义

新建一个弹框组件, 编写基本结构和css样式代码.

基本HTML结构

html

<template>
    <div v-if="visible" class="dialog-overlay" @click="cancel">
        <div class="dialog">
            <div class="dialog-header">
                <span class="dialog-title">{{ title }}</span>
                <button class="dialog-close" @click="cancel">×</button>
            </div>
            <div class="dialog-body">
                <p>{{ content }}</p>
            </div>
            <div class="dialog-footer">
                <button @click="cancel">取消</button>
                <button @click="confirm">确定</button>
            </div>
        </div>
    </div>
</template>

CSS样式

CSS

.dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    color: rgb(0, 0, 0);
    display: flex;
    justify-content: center;
    align-items: center;
}
.dialog {
    background: white;
    padding: 20px;
    border-radius: 5px;
    width: 400px;
    max-width: 90%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.dialog-title {
    font-size: 18px;
    font-weight: bold;
}
.dialog-close {
    background: none;
    color: red;
    border: none;
    font-size: 20px;
    cursor: pointer;
}
.dialog-body {
    margin-bottom: 20px;
}
.dialog-footer {
    text-align: right;
}
.dialog-footer button {
    margin-right: 10px;
}

js 部分

变量

其中 visible 用来控制弹框的显示, title 为标题, content 为弹框内容. required 表示 visible为必需传递的值, 然后default 是当父组件不传递的时候, 就采用default默认值.

事件

  • 定义了 handleConfirmhandleCancelhandleClose 三个方法,分别处理弹框的确认、取消和关闭事件。

js

<script setup>
const props = defineProps({
    visible: {
        type: Boolean,
        required: true,
    },
    title: {
        type: String,
        default: '弹框标题'
    },
    content: {
        type: String,
        default: '这是默认的弹框的内容'
    }
});
const emit = defineEmits(['confirm', 'cancel', 'close']);
const close = () => {
    emit('close');
};
const confirm = () => {
    emit('confirm');
    close();
};
const cancel = () => {
    emit('cancel');
    close();
};
</script>

父组件调用

html

<template>
    <div>
        <button @click="openDialog">打开弹框</button>
        <MyDialog :visible.sync="dialogVisible" :title="title" :content="dialogContent" @confirm="handleConfirm"
            @cancel="handleCancel" @close="handleClose">
        </MyDialog>
    </div>
</template>
<script setup>
import { ref } from 'vue';
import MyDialog from '@/components/MyDialog.vue';
const dialogVisible = ref(false);
const dialogContent = ref('父组件传递过来的弹框内容');
const title = ref('父组件传递过来的弹框标题');
const openDialog = () => {
    dialogVisible.value = true;
};
const closeDialog = () => {
    dialogVisible.value = false;
};
const handleConfirm = () => {
    console.log('弹框确认事件');
    closeDialog();
};
const handleCancel = () => {
    console.log('弹框取消事件');
    closeDialog();
};
const handleClose = () => {
    console.log('弹框关闭事件');
    closeDialog();
};
</script>

说明:

  • 在父组件中
  • 用户点击 “打开弹框” 按钮时,触发 openDialog 方法。
  • openDialog 方法将 dialogVisible 的值设置为 true
  • dialogVisible 的变化通过 Vue 的响应式系统传递给 MyDialog 组件,使其显示。
  • 在子组件 (MyDialog) 中
  • visible 属性的值从父组件传递过来,并通过 v-if 控制弹框的显示与隐藏。
  • 用户点击弹框内的 “确定” 按钮时,触发 confirm 方法。
  • confirm 方法通过 emit 触发 confirm 事件,并调用 close 方法。
  • close 方法触发 close 事件。
  • 在父组件中
  • 监听 MyDialog 组件的 confirmcancelclose 事件。
  • confirm 事件被触发时,父组件执行 handleConfirm 方法,记录日志并关闭弹框(即将 dialogVisible 设置为 false)。
  • cancelclose 事件被触发时,父组件分别执行 handleCancelhandleClose 方法,记录日志并关闭弹框。

效果

image.png

扩展学习

  • defineProps() 用于定义组件的属性,并返回一个包含这些属性的对象。
  • defineEmits() 用于定义组件可以发出的事件,并返回一个用于触发这些事件的函数。


目录
相关文章
|
5月前
|
存储 运维 关系型数据库
2024年最全ceph的功能组件和架构概述(2),Linux运维工程面试问题
2024年最全ceph的功能组件和架构概述(2),Linux运维工程面试问题
2024年最全ceph的功能组件和架构概述(2),Linux运维工程面试问题
|
2月前
|
安全 Java
Java基础面试十四】、 封装的目的是什么,为什么要有封装?
这篇文章讨论了封装在面向对象编程中的目的,强调封装可以隐藏类的实现细节,通过方法控制对数据的访问,保证数据完整性,并提高代码的可维护性。
Java基础面试十四】、 封装的目的是什么,为什么要有封装?
|
2月前
|
JSON JavaScript 前端开发
【Vue面试题二十四】、Vue项目中有封装过axios吗?主要是封装哪方面的?
这篇文章讨论了在Vue项目中封装axios的最佳实践,包括设置接口请求前缀、请求头、状态码、请求方法的封装,以及如何使用请求和响应拦截器来处理token和响应状态,从而简化HTTP请求的配置和错误处理,提高代码的可维护性。
【Vue面试题二十四】、Vue项目中有封装过axios吗?主要是封装哪方面的?
|
2月前
|
JavaScript API
【Vue面试题十】、Vue中组件和插件有什么区别?
这篇文章阐述了Vue中组件和插件的区别,指出组件主要用于构建应用程序的业务模块,而插件用于增强Vue本身的功能,两者在编写形式、注册方式和使用场景上有所不同。
【Vue面试题十】、Vue中组件和插件有什么区别?
|
2月前
|
Java
面试官:OpenFeign十大可扩展组件你知道哪些?
这篇文章是关于OpenFeign框架的可扩展组件的讨论,作者分享了自己在面试中遇到的相关问题,并回顾了OpenFeign源码,列出了十大组件,包括日志、解码器、重试组件等,并展示了如何使用FeignClient注解和@EnableFeignClients注解来实现远程RPC调用。
面试官:OpenFeign十大可扩展组件你知道哪些?
|
2月前
|
负载均衡 监控 Java
SpringCloud常见面试题(一):SpringCloud 5大组件,服务注册和发现,nacos与eureka区别,服务雪崩、服务熔断、服务降级,微服务监控
SpringCloud常见面试题(一):SpringCloud 5大组件,服务注册和发现,nacos与eureka区别,服务雪崩、服务熔断、服务降级,微服务监控
SpringCloud常见面试题(一):SpringCloud 5大组件,服务注册和发现,nacos与eureka区别,服务雪崩、服务熔断、服务降级,微服务监控
|
2月前
|
存储 JavaScript 容器
【Vue面试题十一】、Vue组件之间的通信方式都有哪些?
这篇文章介绍了Vue中组件间通信的8种方式,包括`props`传递、`$emit`事件触发、`ref`、`EventBus`、`$parent`或`$root`、`attrs`与`listeners`、`provide`与`inject`以及`Vuex`,以解决不同关系组件间的数据共享问题。
|
3月前
|
监控 Java 应用服务中间件
SpringCloud面试之流量控制组件Sentinel详解
SpringCloud面试之流量控制组件Sentinel详解
183 0
|
3月前
|
存储 并行计算 安全
Java面试题:请解释Java并发工具包中的主要组件及其应用场景,请描述一个使用Java并发框架(如Fork/Join框架)解决实际问题的编程实操问题
Java面试题:请解释Java并发工具包中的主要组件及其应用场景,请描述一个使用Java并发框架(如Fork/Join框架)解决实际问题的编程实操问题
23 0
|
5月前
|
设计模式 前端开发 网络协议
面试官:说说Netty的核心组件?
Netty 核心组件是指 Netty 在执行过程中所涉及到的重要概念,这些核心组件共同组成了 Netty 框架,使 Netty 框架能够正常的运行。 Netty 核心组件包含以下内容: 1. 启动器 Bootstrap/ServerBootstrap 2. 事件循环器 EventLoopGroup/EventLoop 3. 通道 Channel 4. 通道处理器 ChannelHandler 5. 通道管道 ChannelPipeline 这些组件的交互流程如下: ![image.png](https://cdn.nlark.com/yuque/0/2024/png/92791/1716
37 0
面试官:说说Netty的核心组件?