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标准之后的统一初始…

【2024年5月备考新增】】 考前篇(26)《必备资料(9) - 论文串讲-范围管理》

过程定义输入工具技术输出实际应用规划范 围管理编制范围管理计划: 书面描述将如何定 义、制定确认项目 范围的过程,其主 要作用是在整个项 目中对如何管理范 围提供指南和方向1、项目章程2、项目管理计划.质量管理计划 3、事业环境因素 .项目生命周期描4、组织过程资产 述.开…

react ant design Upload 多文件上传 beforeUpload 会调用很多次,怎么只获取一次

当使用Ant Design的Upload组件实现多文件上传时&#xff0c;beforeUploadHandler函数会被每个选中的文件调用一次。如果您只想获取一次选中的文件而不是每个文件都触发一次处理逻辑&#xff0c;可以采取以下方法&#xff1a; 使用 useRef 钩子保存文件列表&#xff1a;可以使用…

Nginx监控与告警:确保服务稳定运行

在今天的网络世界中&#xff0c;Nginx已经成为许多网站和应用程序的首选反向代理和Web服务器。然而&#xff0c;随着流量的增长和复杂性的增加&#xff0c;确保Nginx服务的稳定运行变得至关重要。本文将探讨如何有效地监控Nginx&#xff0c;并设置告警机制&#xff0c;以便在潜…

cefpython3打包windows应用

序 最近使用cefpython3开发程序&#xff0c;网上找了一圈打包工具都没有效果&#xff0c;最后在github中翻到使用cx_Freeze进行打包。 代码 from distutils.sysconfig import get_python_lib from os.path import join from glob import glob from cx_Freeze import setup, …

数学建模--特殊的图

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

JTS库的讲解及使用

JTS&#xff08;Java Topology Suite&#xff09;是一套用于创建、操作和分析二维几何对象的Java库。JTS提供了丰富的几何操作和分析功能&#xff0c;是GIS&#xff08;地理信息系统&#xff09;应用中的重要工具。以下是JTS库的一些主要功能及其详细使用示例&#xff1a; 1. …

【Python】使用 Pandas 进行均值填充:处理缺失数据的实用指南

缘分让我们相遇乱世以外 命运却要我们危难中相爱 也许未来遥远在光年之外 我愿守候未知里为你等待 我没想到为了你我能疯狂到 山崩海啸没有你根本不想逃 我的大脑为了你已经疯狂到 脉搏心跳没有你根本不重要 &#x1f3b5; 邓紫棋《光年之外》 在数据分析…

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

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

点点点还有没有做下去的必要

大家好&#xff0c;我是洋子&#xff0c;最近工作特别忙&#xff0c;好久没更文章了 因为组织架构调整&#xff0c;原先的组长调离我所在已经3年多的业务线&#xff0c;我就承担起组长的角色了&#xff0c;除了日常跟进需求测试&#xff0c;还跟RD、跨业务线负责人开会&#x…

chat2-Client发送数据给Server

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

fastadmin 放服务器上后出现大量的502 亲身经历

fastadmin 放服务器上后出现大量的502 今天发生了一个特别无语的事情,那就是服务器上出现大量的502报错 因为之前一直都运行的好好的,突然今天就开始不间断的报502的错误,最开始我没有怀疑到服务器上,浪费了一天的时间进行排查! 因为域名挂在cf上,然后我又在cf上做了各种…

自然语言处理(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…

PHP面向对象编程总结

PHP面向对象编程总结 学习PHP时&#xff0c;面向对象编程&#xff08;OOP&#xff09;往往是一个重要的里程碑。PHP的OOP功能提供了一种更加模块化、可扩展和易于维护的代码结构。在本文中&#xff0c;我们将深入探讨PHP面向对象编程的各个方面&#xff0c;包括类与对象、访问控…

【C#】委托和事件

目录 1.概念 2.自定义的委托 3.系统定义的委托 4.委托和事件的区别 1.概念 数组我们都知道是一组数据的容器&#xff0c;而委托很相似&#xff0c;不过它是一组函数的容器。 如果把调用一次函数看做释放一个技能&#xff0c;那调用一次委托则是释放一套技能连招 下面看看…

排序-希尔排序

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