vue-Dialog 自定义title样式

展示结果

vue代码

<el-dialog :title="title" :visible.sync="classifyOpen" width="500px" :showClose="false"  class="aboutDialog">

        <el-form :model="classifyForm" :rules="classifyRules">

            <el-form-item label="区域名称" label-width="120px" prop="name">

                <el-input v-model="classifyForm.name" style="" clearable placeholder="请输入区域名称" class="limited-width"></el-input>

            </el-form-item>

            <el-form-item label="区域级别" label-width="120px" prop="orderNum">

                <el-input v-model="classifyForm.name" style="" clearable placeholder="请输入区域级别" class="limited-width"></el-input>

            </el-form-item>

            <el-form-item label="区域顺序" label-width="120px" prop="icon">

                <el-input-number v-model="classifyForm.dictSort" controls-position="right" :min="0" />

            </el-form-item>

            <el-form-item label="状态" label-width="120px">

              <el-radio-group v-model="classifyForm.status">

                <el-radio

                  v-for="dict in dict.type.sys_normal_disable"

                  :key="dict.value"

                  :label="dict.value"

                >{{dict.label}}</el-radio>

              </el-radio-group>

            </el-form-item>

            <el-form-item label="备注" label-width="120px" prop="remark">

              <el-input v-model="classifyForm.remark" clearable placeholder="请输入备注" ></el-input>

            </el-form-item>

        </el-form>

        <div slot="footer" class="dialog-footer">

            <el-button @click="cancel()">取 消</el-button>

            <el-button type="primary" @click="submitForm">确 定</el-button>

        </div>

     </el-dialog>

js代码

export default {

data() {

        // 弹出层标题

        title: "",

        // 是否显示弹出层

        classifyOpen: false,

        // 表单参数

        classifyForm: {},

        // 表单校验

        classifyRules: {

          name: [

            { required: true, message: '请输入区域名称', trigger: 'blur' }

          ],

        },

}

}

css代码

<style scoped>

  .aboutDialog >>> .el-dialog__body {

    padding: 0px !important;

    padding:15px !important;

  }

  .aboutDialog >>> .el-dialog__header {

    padding: 10px 20px;

    height: 45px;

    line-height: 25px;

    text-align: left;

    background: #3378df;

    border-bottom: solid 1px #3378df;

  }

  .aboutDialog >>> .el-dialog__title {

    color: #fff;

    font-size: 14px;

  }

  .aboutDialog >>> .el-dialog__headerbtn .el-dialog__close {

    color: #fff;

  }

  .aboutDialog >>> .el-dialog__headerbtn:hover .el-dialog__close {

    color: #fff;

  }

  .aboutDialog >>> .el-dialog__headerbtn {

    top: 13px;

  }

  .aboutDialog >>> .el-dialog__footer{

    padding:10px 20px ;

    border-top: solid 1px #3378df;

  }

</style>

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

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

相关文章

【OJ】C++ | 二叉树进阶 · 合集(2)

摘要&#xff1a;根据二叉树创建字符串、二叉树的最近公共祖先、二叉树的层序遍历 前言&#xff1a;承接上文&#xff0c;本文继续提供二叉树进阶有关题目的解法。如有错误&#xff0c;烦请指正。 目录 1. 根据二叉树创建字符串 题解及代码 2. 二叉树的最近公共祖先 题解及…

Java | Leetcode Java题解之第121题买卖股票的最佳时机

题目&#xff1a; 题解&#xff1a; public class Solution {public int maxProfit(int prices[]) {int minprice Integer.MAX_VALUE;int maxprofit 0;for (int i 0; i < prices.length; i) {if (prices[i] < minprice) {minprice prices[i];} else if (prices[i] -…

用幻灯片讲解C++中的C语言风格数组

用幻灯片讲解C中的C语言风格数组 1.栈内存中的C风格数组 糟糕的可用性&#xff0c;但你将在遗留代码中看到它们。相同类型的对象块。大小必须是常量表达式。第一个元素的索引为0&#xff0c;即数组索引从0开始。 注意一下数组的初始化&#xff0c;使用了C11标准之后的统一初始…

数学建模--特殊的图

目录 1.二部图 &#xff08;1&#xff09;简单认识 &#xff08;2&#xff09;定义 &#xff08;3&#xff09;判定定理 &#xff08;4&#xff09;定理理解 2.匹配问题 &#xff08;1&#xff09;匹配 &#xff08;2&#xff09;完备&&完美匹配 &#xff08;3…

Python 入门教程详细版全集(两周速成)

一、初始Python 打开CMD&#xff08;命令提示符&#xff09;程序&#xff0c;输入Python并回车。然后&#xff0c;在里面输入代码回车即可立即执行。 Tip1:找不到“命令提示符”程序在哪里&#xff1f; 使用快捷键&#xff1a;win r;打开运行框&#xff0c;输入cmd后回车即可…

chat2-Client发送数据给Server

本文档描述了Client发送消息给Server&#xff0c; Server端打印接收的消息 一、Client 1.1.客户端的类Client.java中添加如下的start()方法 (表示启动客户端功能的方法)&#xff0c;并调用 /**start方法&#xff0c;作为客户端开始工作的方法*/ public void start(){ …

自然语言处理(NLP)—— 神经网络语言处理

1. 总体原则 1.1 深度神经网络&#xff08;Deep Neural Network&#xff09;的训练过程 下图展示了自然语言处理&#xff08;NLP&#xff09;领域内使用的深度神经网络&#xff08;Deep Neural Network&#xff09;的训练过程的简化图。 在神经网络的NLP领域&#xff1a; 语料…

深入解析Java中List和Map的多层嵌套与拆分

深入解析Java中List和Map的多层嵌套与拆分 深入解析Java中List和Map的多层嵌套与拆分技巧 &#x1f4dd;摘要引言正文内容什么是嵌套数据结构&#xff1f;例子&#xff1a; 遍历嵌套List和Map遍历嵌套List遍历嵌套Map 拆分嵌套数据结构拆分嵌套List拆分嵌套Map &#x1f914; Q…

排序-希尔排序

介绍 希尔排序属于那种没有了解过的直接看代码一脸懵逼的&#xff0c; 所以同学们尽量不要直接看代码&#xff0c;仔细阅读本篇博客内容。 插入排序本来算是一个低效排序&#xff0c; 一次只可以挪动一个数据&#xff0c; 但是&#xff0c;它的强来了&#xff01;&#xff01…

网吧|基于SprinBoot+vue的网吧管理系统(源码+数据库+文档)

网吧管理系统 目录 基于SprinBootvue的网吧管理系统 一、前言 二、系统设计 三、系统功能设计 1 管理员功能模块 2 网管功能模块 3 会员功能模块 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; 博主介绍&#…

Arduino 按钮及弹跳

所需元件 可插入面包板的按钮1个 220Ω电阻1个 10kΩ电阻1个 3mm或5mm LED 1个 面包板1块 Arduino Uno开发板1块 面包板连接线数条 使用外接电阻 将5V接到按钮&#xff0c;按钮的另一端串联1个10kΩ电阻再接地&#xff0c;这样的接法被称为下拉电阻(pull-down resistor)。若测…

【30天精通Prometheus:一站式监控实战指南】第14天:jmx_exporter从入门到实战:安装、配置详解与生产环境搭建指南,超详细

亲爱的读者们&#x1f44b;   欢迎加入【30天精通Prometheus】专栏&#xff01;&#x1f4da; 在这里&#xff0c;我们将探索Prometheus的强大功能&#xff0c;并将其应用于实际监控中。这个专栏都将为你提供宝贵的实战经验。&#x1f680;   Prometheus是云原生和DevOps的…

【LeetCode算法】第104题:二叉树的最大深度

目录 一、题目描述 二、初次解答 三、官方解法 四、总结 一、题目描述 二、初次解答 1. 思路&#xff1a;二叉树的先序遍历。首先判断根节点是否是空&#xff0c;其次判断根节点是否是叶子节点&#xff0c;再者递归获取左子树的深度、右子树的深度&#xff0c;最后返回左子…

【Mac】Lightroom Classic 2024(LrC 2024中文版) v13.1安装教程

软件介绍 Lightroom Classic 2024 for Mac是一款功能强大的照片编辑和组织软件&#xff0c;专为专业摄影师和爱好者设计。它提供了一系列工具和功能来增强和管理您的数码照片。Lightroom Classic 2024在照片组织和管理方面进行了重大改进。它新增了一个智能化的“发现”面板&a…

1. MySQL 数据库的基本操作

文章目录 【 1. SQL 的书写规则 】大小写规则常量的表示注释 【 2. RDBMS 术语 】Table 表Filed 域/字段Column 列Record 记录NULL 空值Constraint 约束数据的完整性范式 【 3. 数据库基本操作函数 】3.1 SHOW DATABASES 显示数据库3.2 CREATE DATABASE 创建数据库3.3 ALTER DA…

回炉重造java----JUC(第一天)

目录 JUC前置知识①进程和线程的区别&#xff1f;②并行和并发的区别&#xff1f;③异步调用和同步调用的区别&#xff1f;④创建线程的方法⑤线程的上下文切换⑥TimeUtil⑦Interrupt⑧如何在一个线程中终止另外一个线程&#xff1f;⑨线程的状态共享模型之管程 阻塞式&#x…

LLVM后端__llc中值定义信息的查询方法示例

关于LiveIntervals pass中相关数据结构的含义&#xff0c;在寄存器分配前置分析(5.1) - LiveInterval这篇博客中已经做了清晰的讲解&#xff0c;此处不再赘述&#xff0c;本文主要讲解值定义信息VNInfo的使用方法和注意事项。 1. VNInfo含义 在LLVM的源码中&#xff0c;VNInf…

视频汇聚EasyCVR综合安防平台对接GA/T1400公安视图库及应用方案

随着科技的不断进步&#xff0c;视频监控系统在公共安全领域发挥着越来越重要的作用。GA/T1400公安视图库作为公安视频图像信息应用系统的标准&#xff0c;为视频监控系统的对接提供了统一的规范和技术要求。 GA/T1400标准的应用范围广泛&#xff0c;涵盖了公安系统的视频图像信…

图解大模型分布式并行各种通信原语

背景 在分布式集群上执行大模型任务时候&#xff0c;往往使用到数据并行&#xff0c;流水线并行&#xff0c;张量并行等技术&#xff0c;这些技术本质上也就是对数据进行各种方案的切分&#xff0c;然后放到不同的节点上运算。不同节点在计算的过程中需要对数据分发或者同步等…