ElMessageBox 内容自定义

news2024/11/5 13:12:53

1. ElmessageBox弹出框显示内容设置字体颜色:

代码内容:

const saveToGroup = (row: Customers) => {
  ElMessageBox.confirm(
    h(
      "i",
      { style: "color: #409EFF" },
      "未建档客户公司无法创建线索/商机/礼品申请。"
    ),
    "是否确认去集团建档?",
    {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "info"
    }
  )
    .then(() => {
      console.log("执行操作")
    })
    .catch(() => {});
};

效果图:

2. 弹出框内容添加ElRadio选择项:

代码内容:

const confirmPop = async () => {
  const checked = ref(false);
  ElMessageBox({
    title: "提示",
    closeOnClickModal: false,
    message: () =>
      h("div", {}, [
        h(
          "p",
          { style: { "margin-bottom": "10px" } },
          "是否即将有线索/商机创建"
        ),
        h(
          ElRadioGroup,
          {
            modelValue: checked.value,
            "onUpdate:modelValue": (val: boolean) => {
              checked.value = val;
            }
          },
          () => [
            h(ElRadio, {
              value: true,
              label: "是"
            }),
            h(ElRadio, {
              value: false,
              label: "否"
            })
          ]
        )
      ])
  })
    .then(async () => {
      console.log("执行之后的操作");
    })
    .catch(() => {
      console.log("cancel");
    });
};

效果图:

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

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

相关文章

学Linux的第五天

目录 命令解释器-shell-负责解析用户输入的命令 分类: type --查看命令是内置命令、外置命名、alias命令 注意 Linux 中的特殊符号 拓展 命令别名aliasalias 别名原命令 - 参数 常用的别名untar,wget,getpass,ping,speed,ipe,c 删除别名unalias…

JavaEE初阶---servlet篇(二)(smartTomcat的使用相关错误类型)

文章目录 1.servlet创建项目问题说明2.SamrtTomcat插件3.乱码问题的说明4.其他的错误类型说明4.1常见错误之4044.2常见错误之4054.3常见错误之5004.4空白页面/无法访问 1.servlet创建项目问题说明 servlet进行这个项目创建的时候,我们的这个web.xml里面的这个内容就…

Centos 网络接口打vlan标签

Centos 网络接口打vlan标签 本次使用给bond打vlan标签,其实其他普通接口也一样 Centos创建bond前需要关闭NetworkManager [root192 network-scripts]# systemctl disable NetworkManager --now Removed symlink /etc/systemd/system/multi-user.target.wants/Netwo…

使用Docker-Compose安装redis,rabbitmq,nacos,mysql,nginx,tomcat,portainer组件教程

因为开发经常会用到一些组件,又不想在本地启动,所以买了个服务器,然后将这些组件都安装到服务器上以便开发使用。下面就记录下使用docker-compose安装组件的教程以及一些需要注意的地方。 关于docker和docker-compose的安装在另一篇博客中有…

WPF+MVVM案例实战(二十二)- 制作一个侧边弹窗栏(CD类)

文章目录 1、案例效果1、侧边栏分类2、CD类侧边弹窗实现1、样式代码实现2、功能代码实现3 运行效果4、源代码获取1、案例效果 1、侧边栏分类 A类 :左侧弹出侧边栏B类 :右侧弹出侧边栏C类 :顶部弹出侧边栏D类 :底部弹出侧边栏2、CD类侧边弹窗实现 1、样式代码实现 在原有的…

解决 “Error: listen EACCES: permission denied 0.0.0.0:80“ 错误

前言 在开发过程中,我们经常会遇到各种各样的错误。其中一个常见的错误是 Error: listen EACCES: permission denied 0.0.0.0:80。这个错误通常发生在尝试启动一个开发服务器时,服务器试图绑定到80端口,但由于权限不足而失败。本文将详细介绍…

国产之光-海豚调度器的入门知识篇

目录 概念和定义 核心特性 核心组件 工作流程 环境准备 系统软件方面 硬件方面 部署方式 单机模式 伪集群模式 集群模式 基本配置 工作流定义 调度管理 定时调度 手动调度 监控告警 任务类型扩展 资源管理 权限控制 概念和定义 Apache DolphinScheduler是一…

使用Netty实现一个简单的聊天服务器

✅作者简介:热爱Java后端开发的一名学习者,大家可以跟我一起讨论各种问题喔。 🍎个人主页:Hhzzy99 🍊个人信条:坚持就是胜利! 💞当前专栏:Netty 🥭本文内容&a…

新世联科技:NG2-A-7在DAC空气捕集提取CO2的应用

一、DAC空气捕集提取CO2的介绍 直接空气碳捕获(Direct Air Capture,简称DAC)是一种直接从大气中提取二氧化碳的技术。 二、DAC空气捕集提取CO2的前景 从大气中提取的这种二氧化碳可以作为循环经济的一部分以各种不同方式使用。未来&#xf…

ISUP协议视频平台EasyCVR视频融合平台接入各类摄像机的方法

安防视频监控ISUP协议视频平台EasyCVR兼容性强、支持灵活拓展,平台可提供视频远程监控、录像、存储与回放、视频转码、视频快照、告警、云台控制、语音对讲、平台级联等视频能力。 想要将摄像机顺利接入EasyCVR平台,实现视频监控的集中管理和分发&#x…

(五)Spark大数据开发实战:灵活运用PySpark常用DataFrame API

目录 一、PySpark 二、数据介绍 三、PySpark大数据开发实战 1、数据文件上传HDFS 2、导入模块及数据 3、数据统计与分析 ①、计算演员参演电影数 ②、依次罗列电影番位前十的演员 ③、按照番位计算演员参演电影数 ④、求每位演员所有参演电影中的最早、最晚上映时间及…

达梦数据库宕机问题分析及处理

官方宕机原因排查 官方故障诊断排除 相关概念 达梦数据库宕机往往会产生core文件,解读core文件是分析宕机原因的主要手段,类似oracle的diag.trc或system dump转储文件,记录数据库线程状态、sql语句等。 首选的排查方向可以从内存溢出、磁盘…

spring ai 入门 之 结构化输出 - 把大模型llm返回的内容转换成java bean

目录 ​编辑 将AI非结构化文本转换为特定格式数据的应用场景说明 Spring AI 介绍 :为Java开发者打造的AI应用开发框架 Qwen 介绍 : 一个国内领先的开源大模型 Spring AI Alibaba框架介绍 : 一个国内最好的spring ai实现 使用spring ai …

HbuildderX运行到手机或模拟器的Android App基座识别不到设备 mac

寻找模拟器 背景: 运行的是h5,模拟器是网易MuMu。 首先检查一下是否配置dab环境,adb version 配置一下hbuilderX的adb: 将命令输出的路径配置到hbuilderx里面去,然后重启下HbuilderX。 开始安装基座…一直安装不…

使用Docker Compose构建多容器应用

💓 博客主页:瑕疵的CSDN主页 📝 Gitee主页:瑕疵的gitee主页 ⏩ 文章专栏:《热点资讯》 使用Docker Compose构建多容器应用 引言 Docker Compose 简介 安装 Docker Compose 创建基本配置 运行多容器应用 查看服务状态 …

react-router与react-router-dom的区别

写法上的区别: 写法1: import {Swtich, Route, Router, HashHistory, Link} from react-router-dom;写法2: import {Switch, Route, Router} from react-router; import {HashHistory, Link} from react-router-dom;react-router实现了路由的核心功能 react-router-…

Python 字符串类型中 ``split(“\n“)`` 与 ``splitlines()`` 方法的一些区别

最近在以 self.__print("#" * 20 "\n") 调用自己写的 __print 接口时发现打印的时候 "\n" 没有打出来,进而发现了 split("\n") 与 splitlines() 方法的一些区别。 一个是参数上,split 需要传递一个字符串作为…

Java Iterator 实现杨辉三角

一、问题描述 杨辉三角定义如下: 1/ \1 1/ \ / \1 2 1/ \ / \ / \1 3 3 1/ \ / \ / \ / \1 4 6 4 1/ \ / \ / \ / \ / \ 1 5 10 10 5 1 把每一行看做一个list,试写一个 Iterator,不断输出下一行的 list&#xf…

Spark 的介绍与搭建:从理论到实践

目录 一、分布式的思想 (一)存储 (二)计算 二、Spark 简介 (一)发展历程 (二)Spark 能做什么? (三)spark 的组成部分 (四&…

Linux操作系统 ------(3.文本编译器Vim)

目录 1.前言 2.本章学习目标 3.vim的三种工作模式 3.1一般模式‌ 3.2编辑模式‌ 3.3命令行模式‌ 4.运行vim 5.vim 不同工作模式下的常见命令 6.一般模式下的功能键 6.1移动光标类 6.2删除、复制和粘贴类 6.3查找替换类 7.从一般模式进入编辑模式 8.命令行模式下的…