Modal.method() 不显示头部的问题

ant-design中的Modal组件有两种用法:
第一种是用标签:<a-modal></a-modal>
第二种是用Api:Modal.info、Modal.warning、Modal.confirm......
一开始项目中这两种用法是混用的,后面UI改造,需要统一样式,步骤如下:

1、封装全局弹窗组件 src/components/ConfirmModal/index.vue

<template><a-modalv-model:visible="visible":title="props.title"centeredwidth="400px":footer="null":keyboard="false":maskClosable="false"destroyOnClose@cancel="cancel"><div v-if="vNode" ref="contentRef" class="text-align-c mt-16"></div><div v-else class="text-align-c mt-16">{{ description }}</div><footer class="text-align-c mb-24 mt-40"><template v-if="footerVNode1 || footerVNode2"><a-button v-if="footerVNode1" ref="footerRef1" class="long-btn" @click="cancel"></a-button><a-buttonv-if="footerVNode2"ref="footerRef2"type="primary":class="[footerVNode1 ? 'ml-40' : 'ml-0', 'long-btn']"@click="cancel"></a-button></template><template v-else><a-button class="long-btn" @click="cancel">取消</a-button><a-button class="ml-40 long-btn" type="primary" :loading="btnLoading" @click="confirm">确认</a-button></template></footer></a-modal>
</template>
<script setup>
import { ref, render, nextTick } from 'vue'
import { Button, Modal } from 'ant-design-vue'const AButton = Button
const AModal = Modalconst emits = defineEmits(['confirm', 'cancel'])
const props = defineProps({title: {type: String,default: '提示'},vNode: {type: Object,default: null},footerVNode1: {type: Object,default: null},footerVNode2: {type: Object,default: null}
})const contentRef = ref()
const footerRef1 = ref()
const footerRef2 = ref()const visible = ref(false)
const description = ref('')
const btnLoading = ref(false)const openModel = value => {description.value = valuevisible.value = truenextTick(() => {if (props.vNode) {render(props.vNode, contentRef.value)}if (props.footerVNode1) {render(props.footerVNode1, footerRef1.value.$el)}if (props.footerVNode2) {render(props.footerVNode2, footerRef2.value.$el)}})
}const cancel = () => {btnLoading.value = falsevisible.value = falseemits('cancel')
}const confirm = () => {emits('confirm')
}defineExpose({openModel,cancel,btnLoading
})
</script>
<style lang="less" scoped></style>

2、同级目录下新建js文件,调用弹窗组件 src/components/ConfirmModal/index.js

import { createApp } from 'vue'
import ConfirmModal from './index.vue'export function showConfirmModal(vNode, footerVNode1, footerVNode2) {const div = document.createElement('div')document.body.appendChild(div)const app = createApp(ConfirmModal, { vNode, footerVNode1, footerVNode2 })const vm = app.mount(div)vm.openModel()return { app, vm }
}

3、在需要调用弹窗组件的js文件中引用 xxx.js

import { ref, h } from 'vue'
import { showConfirmModal } from '@/components/ConfirmModal/index.js'// 强制登录提示
const forceLogin = () => {localStorage.clear()showConfirmModal(h('div', { style: { color: '#333' } }, '你的账号在另一台设备登录,你将被迫下线,请确认密码是否泄露!'),null,h('div',{onClick: () => {window.location.reload()}},'确认'))
}

4、效果图
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

一个程序员的牢狱生涯(37)任务

星期一 任 务 我走回大镣面前后,把双手抱着的衣服递给大镣,但我并没有把手里的东西也递给他。现在的大镣坐着,我站着,这个时候要给大镣的话,肯定能被身边的棍子或六子看到,甚至被所有号子里的人都看到。因为此时,所有人的目光都盯着我手里的衣服,盯着我和大镣看。 “镣…

Shell字符串变量

目标 能够使用字符串的3种方式 掌握Shell字符串拼接 掌握shell字符串截取的常用格式 能够定义Shell索引数组和关联数组 能够使用内置命令alias,echo,read,exit,declare操作 掌握Shell的运算符操作 Shell字符串变量 介绍 字符串&#xff08;String&#xff09;就是一系…

使用LabVIEW时遇到VISA属性错误 -1073807331的解决方案

在LabVIEW或VeriStand中使用VISA属性时&#xff0c;可能会遇到错误 -1073807331。这一错误的具体描述如下&#xff1a; 解决方案 导致VISA属性出现此错误的原因主要有以下四种&#xff1a; 属性不被使用的串行总线支持 示例 A.1&#xff1a;Is Port Connected VISA属性仅支持由…

React(四)memo、useCallback、useMemo Hook

目录 (一)memo API 1.先想一个情景 2.用法 (1)props传入普通数据类型的情况 (2)props传入对象的情况 (3)props传入函数的情况 (4)使用自定义比较函数 3.什么时候使用memo&#xff1f; (二)useMemo Hook 1.用法 2.useMemo实现组件记忆化 3.useMemo实现函数记忆化 …

如何停止 iPad 和 iPhone 之间共享短信,独立接收和发送消息

概括 在当今高度互联的数字世界中&#xff0c;Apple 设备之间的无缝连接性提供了极大的便利&#xff0c;尤其是在消息同步方面。iPhone 和 iPad 用户通常可以享受到设备间短信的自动同步功能&#xff0c;这意味着无论是在哪个设备上&#xff0c;用户都可以接收和回复消息。然而…

2024.5.26.python.exercise

# # 导入包 # from pyecharts.charts import Bar, Timeline # from pyecharts.options import LabelOpts, TitleOpts # from pyecharts.globals import ThemeType # # # 从文件中读取信息 # GDP_file open("1960-2019全球GDP数据.csv", "r", encoding&quo…

A. Maximize?

time limit per test 2 seconds memory limit per test 256 megabytes input standard input output standard output You are given an integer x&#x1d465;. Your task is to find any integer y&#x1d466; (1≤y<x)(1≤&#x1d466;<&#x1d465;) su…

深入理解python列表与字典:数据结构的选择与性能差异

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、列表与字典&#xff1a;基础数据结构的对比 二、列表&#xff1a;逐个遍历的查找方式 …

Ceres求解优化问题

1. 简介 Ceres Solver是专门用于求解非线性最小二乘问题的C开源库,研究SLAM方向不过滤波和优化两个技术路线,因此常用Ceres库解决实际项目中的优化问题,当然还有g2o同样可用,但就说明文档而言,Ceres对新用户更友好,g2o提供不多的文档,更多是需要参考其它开源项目使用,所以笔者…

【JAVA】接口

前面我们说了说抽象类相关内容&#xff0c;这篇我们主要聊聊接口相关内容&#xff0c;这部分很重要&#xff0c;大家引起关注。 1. 接口 1.1 接口的概念 接口就是公共的行为规范标准&#xff0c;大家在实现时&#xff0c;只要符合规范标准&#xff0c;就可以通用。在Java中&am…

力扣 739. 每日温度 python AC

单调栈 class Solution:def dailyTemperatures(self, temperatures):size len(temperatures)ll []ans [0] * sizefor i in range(size - 1, -1, -1):while ll and temperatures[i] > temperatures[ll[-1]]:ll.pop()if ll:ans[i] ll[-1] - ill.append(i)return ans

C语言 数组——向函数传递数组

目录 把数组传给函数&#xff08;Passing Arrays to Functions&#xff09; 向函数传递一维数组 向函数传递二维数组 数组在学生成绩管理中的应用 例&#xff1a;计算每个学生的平均分 把数组传给函数&#xff08;Passing Arrays to Functions&#xff09; 向函数传递一维…

gnocchi学习小结

背景 总结gnocchi 4.4版本gnocchi-metricd工作流程 入口 gnocchi.cli.metricd metricd stop after processing metric默认为0&#xff0c;调servicemanager run MetricdServiceManager __init__ 服务逻辑封装到MetricdServiceManager初始化中 主要由MetricProcessor, Met…

基于Vue的前端自定义询问弹框与输入弹框组件的设计与实践

基于Vue的前端自定义询问弹框与输入弹框组件的设计与实践 摘要 随着技术的不断进步&#xff0c;前端开发面临越来越多的挑战&#xff0c;其中之一就是如何有效管理复杂的业务逻辑和用户体验。传统的整块应用开发方式在面对频繁的功能变更和用户体验优化时&#xff0c;往往显得…

python数据分析-CO2排放分析

导入所需要的package import numpy as np import pandas as pd import matplotlib.pyplot as plt import seaborn as sns import datetime %matplotlib inline plt.rcParams[font.sans-serif] [KaiTi] #中文 plt.rcParams[axes.unicode_minus] False #负号 数据清洗…

MySQL数据表索引命名规范

在数据库设计和开发过程中&#xff0c;索引是提高查询性能的重要工具。合理的索引命名规范不仅能提高代码的可读性&#xff0c;还能便于维护和管理。本文将详细介绍MySQL数据表索引的命名规范&#xff0c;包括不同类型索引的命名方法&#xff0c;并提供多个代码示例以说明如何命…

SSH 远程登录系统和远程拷贝

文章目录 目录 文章目录 前言 一.SSH的基本用法 SSH基本用法&#xff1a; SSH无密码登录 二.SSH安全设置 三.SSH限制用户 前言 很多时候服务器并没有服务器&#xff0c;我们也不能每次都通过控制台去管理服务器&#xff0c;这时候就需要远程登录&#xff0c;相比于Telnet&a…

京东应届生公司内网说了一句‘什么时候被pdd收购‘,结果惨遭辞退

京东应届生公司内网说了一句’什么时候被pdd收购’&#xff0c;结果惨遭公司开除 这个事最近在圈子讨论比较多 前二天&#xff0c;有一个上海交大毕业的应届生&#xff0c;在京东实习了9个月&#xff0c;好不容易转正12天后&#xff0c;只因在内网说了一句话&#xff0c;就被…

upload-labs 21关解析

目录 一、代码审计 二、实践 三、总结 一、代码审计 $is_upload false; $msg null; if(!empty($_FILES[upload_file])){//检查MIME$allow_type array(image/jpeg,image/png,image/gif);if(!in_array($_FILES[upload_file][type],$allow_type)){$msg "禁止上传该类型…

一个程序员的牢狱生涯(38)答案

星期一 答 案 我被这个不知道什么时候无声无息的出现在身后的人吓出了一身的冷汗。 看到我发现了他,这个人慢慢地抬起了头……“他X的,是小X州!” 此时的小X州脸上并没有着急等待上厕所的表情,反而是用一种狡黠的眼神看着我。一直充满的敌意,现在又多了一丝威胁的神情,让…