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.rhkb.cn/news/336617.html

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

相关文章

【赠书第26期】AI绘画教程:Midjourney使用方法与技巧从入门到精通

文章目录 前言 1 Midjourney入门指南 1.1 注册与登录 1.2 界面熟悉 1.3 基础操作 2 Midjourney进阶技巧 2.1 描述词优化 2.2 参数调整 2.3 迭代生成 3 Midjourney高级应用 3.1 创意启发 3.2 团队协作 3.3 商业应用 4 总结与展望 5 推荐图书 6 粉丝福利 前言 在…

自动控制:控制系统的稳定性

自动控制&#xff1a;控制系统的稳定性 在自动控制领域&#xff0c;控制系统的稳定性是一个至关重要的问题。稳定性决定了系统在受到扰动后是否能够恢复到平衡状态。本文将介绍控制系统稳定性的基本概念、如何利用特征值分析稳定性&#xff0c;并通过具体示例和Python代码展示…

【香橙派 AIpro】新手保姆级开箱教程:Linux镜像+vscode远程连接

香橙派 AIpro 开发板 AI 应用部署测评 写在最前面一、开发板概述官方资料试用印象适用场景 二、详细开发前准备步骤1. 环境准备2. 环境搭建3. vscode安装ssh插件4. 香橙派 AIpro 添加连接配置5. 连接香橙派 AIpro6. SSH配置 二、详细开发步骤1. 登录 juypter lab2. 样例运行3. …

基于51单片机的温度+烟雾报警系统设计

一.硬件方案 本设计采用51单片机为核心控制器&#xff0c;利用气体传感器MQ-2、ADC0832模数转换器、DS18B20温度传感器等实现基本功能。通过这些传感器和芯片&#xff0c;当环境中可燃气体浓度或温度等发生变化时系统会发出相应的灯光报警信号和声音报警信号&#xff0c;以此来…

【C语言回顾】预处理

前言1. 简单概要2. 预处理命令讲解结语 上期回顾: 【C语言回顾】编译和链接 个人主页&#xff1a;C_GUIQU 归属专栏&#xff1a;【C语言学习】 前言 各位小伙伴大家好&#xff01;上期小编给大家讲解了C语言中的编译和链接&#xff0c;接下来我们讲解一下预处理&#xff01; …

嘉立创使用gif

新建原理图 边框设置2 新建pcb图 放置焊盘 排列焊盘 新建符号 封号向导 新建封装 封装向导 符号与封装联结 原件查找 drc设计规则&#xff08;线之间的距离等 布线冲突 顶底层切换 T ,B 顶底连线&#xff0c;自动创造过孔 铺铜 泪滴 网格大小 吸附 元件库

【机器学习】Adaboost: 强化弱学习器的自适应提升方法

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 Adaboost: 强化弱学习器的自适应提升方法引言Adaboost基础概念弱学习器与强学习…

C++ vector 模拟实现

vector的底层也是一个动态数组&#xff0c;他与 string 的区别就是&#xff0c;string 是专门用来存储字符类数据的&#xff0c;为了兼容C语言&#xff0c;使用C语言的接口&#xff0c;在string的动态数组内都会都开一块空间用来存 \0 &#xff0c;而vector则不会。 首先我们要…

【Linux】TCP协议【上】{协议段属性:源端口号/目的端口号/序号/确认序号/窗口大小/紧急指针/标记位}

文章目录 1.引入2.协议段格式4位首部长度16位窗口大小32位序号思考三个问题【demo】标记位URG: 紧急指针是否有效提升某报文被处理优先级【0表示不设置1表示设置】ACK: 确认号是否有效PSH: 提示接收端应用程序立刻从TCP缓冲区把数据读走RST: 对方要求重新建立连接; 我们把携带R…

《QT实用小工具·六十八》基于QMenu开发的炫酷菜单栏

1、概述 源码放在文章末尾 该项目基于QMenu实现了炫酷的菜单栏效果&#xff0c;包含了如下功能&#xff1a; 1、实现了类似word菜单栏的效果&#xff0c;可以在菜单栏中横向添加不同的菜单 2、鼠标点击菜单可以展开菜单栏&#xff0c;再次点击菜单可以收起菜单栏 3、鼠标点击笑…

C++ wasm 使用教程

环境搭建 git clone https://github.com/emscripten-core/emsdk.gitgit pull./emsdk install latest./emsdk activate latestsource ./emsdk_env.sh./emcc -v && ./emcc c11__Thread_local.c -s WASM_WORKERS --threadprofiler --memoryprofiler -v -o test.html &…

鸿蒙OS开发:【一次开发,多端部署】(分栏控件)

一多分栏控件 介绍 本示例分别展示了多场景下&#xff0c;一多分栏控件的响应式变化效果。 本示例分别用到了[SideBarContainer]组件与[Navigation]组件&#xff0c;对应使用场景如下&#xff1a; ABC&#xff1a;即SideBarContainer组件组合Navigation组件AC&#xff1a;S…

AI企业需要“联盟营销”?一文带你探索AI企业营销新玩法!

为什么联盟营销对AI业务有较大优势 联盟营销在电商领域、saas领域与其他产品领域同样有效。在AI业务中&#xff0c;它有效的原因与其他领域大不相同。 高好奇心和试用率 AI领域是创新的热点。它吸引了一群渴望探索和尝试每一项新技术的人群。这种蓬勃的好奇心为聪明的AI企业提…

Linux 编译器gcc/g++使用

gcc/g同理 编译器运行过程 1. 预处理&#xff08;进行宏替换) gcc -E a.c -o a.i 预处理后还是c语言 -E 只激活预处理,这个不生成文件,你需要把它重定向到一个输出文件里面 告诉gcc&#xff0c;从现在开始进行程序的翻译&#xff0c;将预处理工作做完停下 2. 编译&#x…

【因果推断python】2_因果关系初步2

目录 偏差 关键思想 偏差 偏差是使关联不同于因果关系的原因。幸运的是&#xff0c;我们的直觉很容易理解。让我们在课堂示例中回顾一下我们的平板电脑。当面对声称为孩子提供平板电脑的学校会获得更高考试成绩的说法时&#xff0c;我们可以反驳说&#xff0c;即使没有平板电…

新疆 | 金石商砼效率革命背后的逻辑

走进标杆企业&#xff0c;感受名企力量&#xff0c;探寻学习优秀企业领先之道。 本期要跟砼行们推介的标杆企业是新疆砼行业的龙头企业&#xff1a;新疆兵团建工金石商品混凝土有限责任公司&#xff08;以下简称&#xff1a;新疆金石&#xff09;。 从年产80万方到120万方&am…

Go 和 Delphi 定义可变参数函数的对比

使用可变参数函数具有灵活性、重用性、简化调用等优点&#xff0c;各个语言有各自定义可变参数函数的方法&#xff0c;也有通用的处理方法&#xff0c;比如使用数组、定义参数结构体、使用泛型等。 这里总结记录一下 go、delphi 的常用的定义可变参数函数的方式&#xff01; 一…

数据挖掘与机器学习——回归分析

目录 回归分析定义&#xff1a; 案例&#xff1a; 线性回归 预备知识&#xff1a; 定义&#xff1a; 一元线性回归&#xff1a; 如何找出最佳的一元线性回归模型&#xff1a; 案例&#xff1a; python实现&#xff1a; 多元线性回归 案例&#xff1a; 线性回归的优缺点…

基于xilinx FPGA的 FFT IP使用例程说明文档(可动态配置FFT点数,可计算信号频率与幅度)

目录 1 概述2 IP examples功能3 IP 使用例程3.1 IP设置3.2 fft_demo端口3.3 例程框图3.4 仿真结果3.5 仿真验证得出的结论4 注意事项5例程位置 1 概述 本文用于讲解xilinx IP 的FFT ip examples的功能说明&#xff0c;方便使用者快速上手。 参考文档&#xff1a;《PG109》 2 …

如何配置才能连接远程服务器上的 redis server ?

文章目录 Intro修改点 Intro 以阿里云服为例。 首先&#xff0c;我在我买的阿里云服务器中以下载源码、手动编译的方式安装了 redis-server&#xff0c;操作流程见&#xff1a;Ubuntu redis 下载解压配置使用及密码管理 && 包管理工具联网安装。 接着&#xff0c;我…