自定义提示确认弹窗-vue

最初可运行代码

弹窗组件代码:

(后来发现以下代码可运行,但打包 typescript 类型检查出错,可打包的代码在文末)

<template>
  <div v-if="isVisible" class="dialog">
    <div class="dialog-content">
      <div style="padding: 40px 40px; text-align: center">{{message}}</div>
      <div style="display: flex; border-top: 1px solid #d2d0d0">
        <div @click="cancel" class="dialog-button">取消</div>
        <div style="border-right: 1px solid #d2d0d0"></div>
        <div @click="handleConfirm" class="dialog-button" style="color: #4e8fd3">确定</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const isVisible = ref(false);
const message = ref('');
const confirmCallback = ref(null)
const cancelCallback = ref(null);

const showDialog = (params = {} ) => {
  isVisible.value = true;
  message.value = params.message || '提示内容';
  confirmCallback.value = params.confirmCallback || null;
  cancelCallback.value = params.cancelCallback || null;
};

const handleConfirm = () => {
  if (confirmCallback.value) {
    confirmCallback.value();
  }
  isVisible.value = false;
};

const cancel = () => {
  if (cancelCallback.value) {
    cancelCallback.value();
  }
  isVisible.value = false;
};

defineExpose({
  showDialog
});
</script>

<style scoped>
.dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
}

.dialog-content {
  background-color: #fff;
  border-radius: 10px;
  width: 80%;
}

.dialog-button {
  flex-grow: 1;
  text-align: center;
  padding: 20px 0;
}
</style>

效果:更适用于移动端

弹窗显示:

<template>
  <div>
    <button @click="openDialog">打开弹窗</button>
    <ChildDialg ref="dialogRef" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
    // 1. 引入子组件
import ChildDialg from "@/views/components/ChildDialg.vue";
    // 2. 定义子组件 ref 参数
const dialogRef = ref(null);

const openDialog = () => {
    // 3. 弹窗显示
  dialogRef.value.showDialog({
      message: '内容',
      confirCallback: () => {
          
      }
  });
};
</script>

打包 typescript 检查错误修复

######## 项目打包,typescript 类型检查报错 ###########

1. 函数接收类没有属性定义

2. 调用弹窗时未作 组件 非空判断

3. 接收的回调函数参数,定义的初始值为 null ,无法以函数方式调用

4. 定义的组件 ref 参数默认值为 null ,无法调用子组件暴露的函数

5. 子组件定义的参数 与 父组件传递的参数不一致(定义了取消回调,但没有传入)

可以选择传入“取消”操作的回调函数,但考虑到此组件在我实际运用时取消没有其它操作,便选择不定义其回调函数

最终可打包的代码

<template>
  <div v-if="isVisible" class="dialog">
    <div class="dialog-content">
      <div style="padding: 40px 40px; text-align: center">{{message}}</div>
      <div style="display: flex; border-top: 1px solid #d2d0d0">
        <div @click="cancel" class="dialog-button">取消</div>
        <div style="border-right: 1px solid #d2d0d0"></div>
        <div @click="handleConfirm" class="dialog-button" style="color: #4e8fd3">确定</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const isVisible = ref(false);
const message = ref('');
const confirmCallback = ref(() => {})
const cancelCallback = ref(() => {});

const showDialog = (params = {
  message: '提示内容',
  confirmCallback: () => {}
} ) => {
  isVisible.value = true;
  message.value = params.message;
  confirmCallback.value = params.confirmCallback;
};

const handleConfirm = () => {
  if (confirmCallback.value) {
    confirmCallback.value();
  }
  isVisible.value = false;
};

const cancel = () => {
  if (cancelCallback.value) {
    cancelCallback.value();
  }
  isVisible.value = false;
};

defineExpose({
  showDialog
});
</script>

<style scoped>
.dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
}

.dialog-content {
  background-color: #fff;
  border-radius: 10px;
  width: 80%;
}

.dialog-button {
  flex-grow: 1;
  text-align: center;
  padding: 20px 0;
}
</style>
<template>
  <div>
    <button @click="openDialog">打开弹窗</button>
    <ChildDialg ref="dialogRef" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
    // 1. 引入子组件
import ChildDialg from "@/views/components/ChildDialg.vue";
    // 2. 定义子组件 ref 参数
const dialogRef = ref<InstanceType<typeof  DialogView> | null>(null)

const openDialog = () => {
    // 3. 弹窗显示
  if(dialogRef.value) {
    dialogRef.value.showDialog({
      message: '内容',
      confirCallback: () => {
          
      }
    });
  }
};
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/955997.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

leetcode707-设计链表

leetcode 707 思路 本题也是用了虚拟头节点来进行解答&#xff0c;这样的好处是&#xff0c;不管是头节点还是中间的节点都可以当成是中间节点来处理&#xff0c;用同一套方法就可以进行处理&#xff0c;而不用考虑太多的边界条件。 下面题目中最主要的实现就是添加操作addA…

LabVIEW桥接传感器配置与数据采集

该LabVIEW程序主要用于配置桥接传感器并进行数据采集&#xff0c;涉及电压激励、桥接电阻、采样设置及错误处理。第一个VI&#xff08;"Auto Cleanup"&#xff09;用于自动清理资源&#xff0c;建议保留以确保系统稳定运行。 以下是对图像中各个组件的详细解释&#…

OpenCV基础:获取子矩阵的几种方式

目录 相关阅读 方法一&#xff1a;使用切片操作 方法二&#xff1a;使用高级索引 方法三&#xff1a;使用条件筛选 方法四&#xff1a;使用 numpy 的 take 函数 相关阅读 OpenCV基础&#xff1a;矩阵的创建、检索与赋值-CSDN博客 OpenCV基础&#xff1a;图像运算-CSDN博客…

深入剖析Java线程安全的集合类:原理、特点与应用

引言&#xff1a;线程安全集合类的重要性 在当今的软件开发领域&#xff0c;多线程编程已经成为了构建高性能、响应式应用的关键技术。随着硬件技术的飞速发展&#xff0c;多核处理器的普及使得程序能够充分利用多个核心的计算能力&#xff0c;从而显著提升运行效率。在多线程环…

Ubuntu 22.04虚拟机安装配置调整(语言输入法字体共享剪切板等等

2025.01.07安装配置Ubuntu 22.04 记一下 快捷键 截屏 在设置-键盘-快捷键查看 跟搜到的不一样…不过shiftprint感觉也够用 安装 用的是VMware 参考&#xff1a;VMware中安装配置Ubuntu&#xff08;2024最新版 超详细&#xff09; 调教&#xff08;&#xff1f; 语言 改了…

vim练级攻略(精简版)

vim推荐配置: curl -sLf https://gitee.com/HGtz2222/VimForCpp/raw/master/install.sh -o ./install.sh && bash ./install.sh 0. 规定 Ctrl-λ 等价于 <C-λ> :command 等价于 :command <回车> n 等价于 数字 blank字符 等价于 空格&#xff0c;tab&am…

VSCode 的部署

一、VSCode部署 (1)、简介 vsCode 全称 Visual Studio Code&#xff0c;是微软出的一款轻量级代码编辑器&#xff0c;免费、开源而且功能强大。它支持几乎所有主流的程序语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比Diff、版本管理GIT等特性&…

Nginx在Linux中的最小化安装方式

1. 安装依赖 需要安装的东西&#xff1a; wget​&#xff0c;方便我们下载Nginx的包。如果是在Windows下载&#xff0c;然后使用SFTP上传到服务器中&#xff0c;那么可以不安装这个软件包。gcc g​&#xff0c;Nginx是使用C/C开发的服务器&#xff0c;等一下安装会用到其中的…

如何在vue中渲染markdown内容?

文章目录 引言什么是 markdown-it&#xff1f;安装 markdown-it基本用法样式失效&#xff1f;解决方法 高级配置语法高亮 效果展示 引言 在现代 Web 开发中&#xff0c;Markdown 作为一种轻量级的标记语言&#xff0c;广泛用于文档编写、内容管理以及富文本编辑器中。markdown…

Android 高版本如何获取App安装列表?

有个需求需要获取App内的安装列表,但是现在在高版本Android中,只能获取到一部分App效果,我获取的代码如下: val calendar Calendar.getInstance()val packageManager context.packageManagerval usageStatsManager context.getSystemService(Context.USAGE_STATS_SERVICE) …

第 5 场 算法季度赛

题目&#xff1a; 5.精准难度【算法赛】 - 蓝桥云课 问题描述 小蓝&#xff0c;蓝桥杯命题组的核心人物。今年的他出题灵感爆发&#xff0c;一口气出了 N 道题目&#xff0c;难度系数分别为 A1​,A2​,…,AN​。 只是&#xff0c;这些题目的难度参差不齐&#xff0c;让组委…

对话 TDengine 解决方案中心总经理陈肃:构建技术与市场的桥梁

TD 小T导读 他是大数据领域的杰出专家&#xff0c;拥有超过十项一作发明专利&#xff0c;是中国通信行业标准《大数据 消息中间件技术要求与测试方法》的重要编写者&#xff0c;并凭借数据中间件领域的突出成就荣获 2019 年“CJK OSS Award”。他是腾讯云 TVP 专家和 TGO 鲲鹏会…

rabbitmq安装延迟队列

在RabbitMQ中&#xff0c;延迟队列是一种特殊的队列类型。当消息被发送到此类队列后&#xff0c;不会立即投递给消费者&#xff0c;而是会等待预设的一段时间&#xff0c;待延迟期满后才进行投递。这种队列在多种场景下都极具价值&#xff0c;比如可用于处理需要在特定时间触发…

GitLab集成Jira

GitLab与Jira集成的两种方式 GitLab 提供了两种 Jira 集成&#xff0c;即Jira议题集成和Jira开发面板集成&#xff0c;可以配置一个或者两个都配置。 具体集成步骤可以参考官方文档Jira 议题集成&#xff08;极狐GitLab文档&#xff09;和Jira 开发面板集成&#xff08;极狐G…

【正则表达式】从0开始学习正则表达式

正则表达式&#xff08;英语&#xff1a;Regular Expression&#xff0c;在代码中常简写为regex、regexp或RE&#xff09; 一、推荐学习网站 正则表达式 – 语法 | 菜鸟教程 正则表达式30分钟入门教程 | 菜鸟教程 编程胶囊-打造学习编程的最好系统 二、必知必记 2.1 元字符…

【docker踩坑记录】

docker踩坑记录 踩坑记录(持续更新中.......)docker images 权限问题 踩坑记录(持续更新中…) docker images 权限问题 permission denied while trying to connect to the Docker daemon socket at unix:///var/run/docker.sock: Head "http://%2Fvar%2Frun%2Fdocker.s…

HackMyVM-Klim靶机的测试报告

目录 一、测试环境 1、系统环境 2、使用工具/软件 二、测试目的 三、操作过程 1、信息搜集 2、Getshell 3、提权 CVE-2008-0166 四、结论 一、测试环境 1、系统环境 渗透机&#xff1a;kali2021.1(192.168.159.127) 靶 机&#xff1a;debian(192.168.159.27) 注意事…

Hexo + NexT + Github搭建个人博客

文章目录 一、 安装二、配置相关项NexT config更新主题主题样式本地实时预览常用命令 三、主题设置1.侧边栏2.页脚3.帖子发布字数统计 4.自定义自定义页面Hexo 的默认页面自定义 404 页自定义样式 5.杂项搜索服务 四、第三方插件NexT 自带插件评论系统阅读和访问人数统计 五、部…

CamemBERT:一款出色的法语语言模型

摘要 预训练语言模型在自然语言处理中已无处不在。尽管这些模型取得了成功&#xff0c;但大多数可用模型要么是在英语数据上训练的&#xff0c;要么是在多种语言数据拼接的基础上训练的。这使得这些模型在除英语以外的所有语言中的实际应用非常有限。本文探讨了为其他语言训练…

基于PyQt - 6的医疗多模态大模型医疗研究系统中的创新构建与应用(上 .文章部分)

一、引言 1.1 研究背景与意义 在当今数智化时代,医疗行业正经历着深刻的变革,对智能化、高效化的需求日益迫切。传统的医疗模式在面对海量的医疗数据、复杂的诊断流程以及个性化的治疗需求时,逐渐显露出局限性。随着人工智能技术的飞速发展,多模态大模型作为一种前沿技术…