element-plus-自定义Dialog样式

news2024/11/23 10:52:28

实现如下

<template>
    <h3>dialog3 test 全局</h3>
    <el-button type="primary" size="default" @click="show">全局弹窗</el-button>

    <div class="">
        <!-- 弹窗 -->
        <el-dialog v-model="visible" :show-close="false" append-to-body class="myDialogClass">
            <!--弹窗标题-->
            <template #header="{ close, titleId }">
                <div class="myDialogHeader">
                    <span :id="titleId" class="dlgTitleClass" style="margin: 10px 10px;">提示</span>
                    <el-button style="margin: 8px;" type="info" :icon="CircleCloseFilled" circle  @click="close" size="small"> 
                        <el-icon style="font-size: 26px;" color="#ffffff"><CircleCloseFilled /></el-icon>
                    </el-button>
                </div>
            </template>
            This is dialog content.
            
            <!--弹窗底部-->
            <template #footer>
                <span class="myDialogFooter">
                    <el-button type="primary" @click="visible = false">确定</el-button>
                    <el-button type="primary" @click="visible = false">取消</el-button>
                </span>
            </template>

        </el-dialog>

    </div>

</template>

<script>
import { ref } from 'vue'
export default {

    setup() {
        const visible = ref(false);
          
        function show() {
            //console.log('show',visible)
            visible.value = true;
        }

        return { show, visible}
    }



}
</script>

<style scoped>

.myDialogClass {
    /*scoped 模式下  background-color 不生效 直接写到style*/
    background-color: rgb(224,242,241) !important;
    border-radius: 10px;
}
.myDialogClass .dlgTitleClass
{
    color: rgb(26,147,144);
}

.el-dialog .el-dialog__header 
{
    margin: 0px !important;
    padding: 0px !important;
    padding-left: 0px !important;
}
.el-dialog .myDialogHeader {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 40px;
    /* background-color: #ff00ff; */
    border-bottom: 1px solid rgb(42,155,152);
    margin: 0px 10px;
    font-size: 18px;
    font-weight: bolder;
}

.el-dialog .el-dialog__footer
{
    padding: 10px;
}

.myDialogFooter .el-button
{
    border-color: rgb(42,155,152);
    background-color: rgb(242,249,249);
    color: rgb(42,155,152);
}





</style>

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

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

相关文章

使用 Matter-SDK 快速搭建 Matter 环境 (Linux)

Matter 作为一个统一的智能家居互联协议&#xff0c;凭借其高兼容性的特点&#xff0c;正逐渐打破各个智能家居之间的壁垒。乐鑫作为在 Matter 项目发布之初的早期成员&#xff0c;提供了一套开源、完整、易用的 Matter-SDK。 乐鑫的 Matter-SDK 是建立在开源 Matter-SDK 之上…

MySQL - order by排序查询 (查询操作 四)

功能介绍&#xff1a;order by&#xff1a;对查询结果进行排序&#xff0c;执行顺序在查询完结果执行&#xff08;比如where后&#xff09; 排序方式&#xff1a;ASC&#xff1a;升序&#xff08;默认&#xff0c;不用指定&#xff09; DESC&#xff1a;降序 语法&#x…

Android跨进程通信:Binder机制原理

目录 1. Binder到底是什么&#xff1f; 2. 知识储备 2.1 进程空间划分 2.2 进程隔离 & 跨进程通信&#xff08; IPC &#xff09; 2.3 内存映射 2.3.1 作用 2.3.2 实现过程 2.3.3 特点 2.3.4 应用场景 2.3.5 实例讲解 ① 文件读 / 写操作 ② 跨进程通信 3. Bi…

【Java 基础篇】Java 图书管理系统详解

介绍 图书管理系统是一种用于管理图书信息、借阅记录、用户信息等的软件系统。它可以帮助图书馆、书店或个人管理和组织图书资源&#xff0c;提供了方便的借阅和查询功能。在这篇博客中&#xff0c;我们将详细介绍如何使用Java编程语言创建一个简单的图书管理系统。 功能需求…

SpringMVC 学习(一)Servlet

1. Hello Servlet (1) 创建父工程 删除src文件夹 引入一些基本的依赖 <!--依赖--> <dependencies><dependency><groupId>junit</groupId><artifactId>junit</artifactId><version>4.12</version><scope>test<…

大模型lora微调-chatglm2

通义千问大模型微调源码&#xff08;chatglm2 微调失败&#xff0c;训练通义千问成功&#xff09;&#xff1a;GitHub - hiyouga/LLaMA-Efficient-Tuning: Easy-to-use LLM fine-tuning framework (LLaMA-2, BLOOM, Falcon, Baichuan, Qwen, ChatGLM2)Easy-to-use LLM fine-tun…

STM32存储左右互搏 I2C总线读写FRAM MB85RC1M

STM32存储左右互搏 I2C总线读写FRAM MB85RC1M 在较低容量存储领域&#xff0c;除了EEPROM的使用&#xff0c;还有铁电存储器FRAM的使用&#xff0c;相对于EEPROM, 同样是非易失性存储单元&#xff0c;FRAM支持更高的访问速度&#xff0c; 其主要优点为没有EEPROM持续写操作跨页…

day06_循环

今日内容 零、 复习昨日 一、循环 二、流程控制关键词 零、 复习昨日 8个基本数据类型 变量的使用步骤 1)声明2)赋值3)使用 声明,数据类型 变量名 不一定非得是基本类型 int a; String s; Scanner scanner;赋值,只要符合类型(能默认转换)就能赋值 int a 1; double d 1; Scann…

uni-app问题记录

一、启动问题记录 1. 报错1 解决办法: 开启微信开发者工具服务端口 2. 报错2:调用getLocation获取位置信息时报错以下内容 {errMsg: “getLocation:fail the api need to be declared in the requiredPrivateInfos field in app.json/ext.json”} 解决办法: manifest.json文…

到广阔的边缘市场去,浪潮信息首次发布全栈边缘计算软硬件新品

出品 | CSDN 云计算 智慧时代&#xff0c;一切皆计算&#xff0c;早已不再是一句口号。据国际研究机构 IDC 数据显示&#xff0c;2023 年超过 50%的企业新增 IT 基础设施会部署在边缘&#xff0c;而 Gartner 研究显示&#xff0c;到 2025 年&#xff0c;超过 75%的数据生成和数…

【ROS入门】使用 ROS 服务(Service)机制实现同步请求与答复

文章结构 任务要求话题模型实现步骤自定义srv定义srv文件编辑配置文件编译 自定义srv调用vscode配置编写服务端实现编写客户端实现 执行启动roscore编译启动客户端和服务端编译启动roscore启动节点 任务要求 编写代码实现 ROS 中的服务请求与答复: 创建服务端&#xff0c;注册…

vue中使用富文本编辑器,@tinymce/tinymce-vue

富文本就是在后台管理系统中常见的录入带格式的内容&#xff0c;如&#xff1a;表格&#xff0c;字体加粗&#xff0c;斜体&#xff0c;文字颜色等等&#xff0c;就像一个word一样。类似于这样的效果&#xff1a; 我们使用通用在线编辑器tinymce。支持vue和react。 1. 安装 np…

opencv形态学-腐蚀

opencv形态学-腐蚀 腐蚀就是取每一个位置结构元领域内最小值作为该位置的输出灰度值&#xff1b; 结构元有很多&#xff0c;一般采用矩形&#xff0c;圆 解析 下图左测是原始图片的灰阶&#xff0c;右边是经过3X3矩形腐蚀后的结果&#xff0c;我们拿19,44,99进行分析&#…

Flink CDC MySQL同步MySQL错误记录

1、启动 Flink SQL [appuserwhtpjfscpt01 flink-1.17.1]$ bin/sql-client.sh2、新建源表 问题1&#xff1a;Encountered “(” 处理方法&#xff1a;去掉int(11)&#xff0c;改为int Flink SQL> CREATE TABLE t_user ( > uid int(11) NOT NULL AUTO_INCREMENT COMME…

关于DDR协议的一些操作的理解4

address 1.DDR中的地址&#xff0c;下表中的*4/ *8/ *16表示的是颗粒位宽。不同位宽的颗粒的行列地址的分步是不一样的。图中的page size表示的就是一行所存储的内容&#xff0c;以64MB*16格式为例&#xff0c;一行一共有10列&#xff0c;每一列存储16bit&#xff0c;也就是2B…

每日一题 146. LRU 缓存

难度&#xff1a;中等 由于周日没做&#xff0c;今天又是困难题&#xff0c;所以假装今天是周日 思路&#xff1a; 在字典结构的基础之上完成三个要求显然题目要求构建一个有序字典&#xff08;当然不使用OrderedDict&#xff09;&#xff0c;由于 key 是唯一的&#xff0c;…

TLS/SSL(六) 非对称密码应用 PKI 证书体系

一 PKI 证书体系 概念&#xff1a; PKI、CA、数字证书、证书链、数字签名之前讲解的公钥不同于https站点所获取的证书,公钥只是数字证书的一部分信息说明&#xff1a; 以下内容仅作为个人笔记 华为云证书管理服务 CCM ① 基础 PKI目前有一系列标准规范定义,主要包括: ② …

lv5 嵌入式开发-6 线程的取消和互斥

目录 1 线程通信 – 互斥 2 互斥锁初始化 – pthread_mutex_init 3 互斥锁销毁 pthread_mutex_destroy 4 申请锁 – pthread_mutex_lock 5 释放锁 – pthread_mutex_unlock 6 读写锁 7 死锁的避免 8 条件变量&#xff08;信号量&#xff09; 9 线程池概念和实现 9.1 …

全栈工程师必须要掌握的前端JavaScript技能

作为一名全栈工程师&#xff0c;在日常的工作中&#xff0c;可能更侧重于后端开发&#xff0c;如&#xff1a;C#&#xff0c;Java&#xff0c;SQL &#xff0c;Python等&#xff0c;对前端的知识则不太精通。在一些比较完善的公司或者项目中&#xff0c;一般会搭配前端工程师&a…

暗月中秋靶场活动writeup

前言 暗月在中秋节搞了个靶场活动&#xff0c;一共有4个flag&#xff0c;本着增长经验的想法参加了本次活动&#xff0c;最终在活动结束的时候拿到了3个flag&#xff0c;后面看了其他人的wp也复现拿到第四个flag。过程比较曲折&#xff0c;所以记录一下。 靶场地址 103.108.…