当前位置: 首页 > news >正文

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>

相关文章:

vue-Dialog 自定义title样式

展示结果 vue代码 <el-dialog :title"title" :visible.sync"classifyOpen" width"500px" :showClose"false" class"aboutDialog"> <el-form :model"classifyForm" :rules"classifyRules">…...

数据库主键设计

文章目录 前言1. 自增ID&#xff08;Auto-Increment&#xff09;2. GUID (Globally Unique Identifier)3. 雪花算法&#xff08;Snowflake&#xff09;处理时钟回拨的方法1. 简单等待2. 配置时钟回拨安全窗口3. 使用不同的机器 ID 小结稳定的雪花算法实现方案示例实现1. 定义雪…...

小熊家务帮day13-day14 门户管理(ES搜索,Canal+MQ同步,索引同步)

目录 1 服务搜索1.1 需求分析1.2 技术方案1.2.1 使用Elasticsearch进行全文检索&#xff08;为什么数据没有那么多还要用ES&#xff1f;&#xff09;1.2.2 索引同步方案1.2.2.1 Canal介绍1.2.2.1 Canal工作原理 1 服务搜索 1.1 需求分析 服务搜索的入口有两处&#xff1a; 在…...

Android8.1高通平台修改默认输入法

需求 安卓8.1 SDK原生的输入法只能打英文, 需要替换成中文输入法. 以高通平台为例, 其它平台也适用. 查看设备当前默认输入法 adb shell settings list secure | grep input 可以看到当前默认是LatinIME这个安卓原生输入法. default_input_methodcom.android.inputmethod.l…...

49. 字母异位词分组

思路&#xff1a;题目的意思是&#xff0c;将所有字母相同的字符串放到一个数组中 解题思路是&#xff1a;使用map,使用排序好的字符串作为key&#xff0c;源字符串作为value,就可以实现所有字母相同的字符串对应一个key vector<vector<string>> groupAnagrams(ve…...

负压实验室设计建设方案

随着全球公共卫生事件的频发&#xff0c;负压实验室的设计和建设在医疗机构中的重要性日益凸显。负压实验室&#xff0c;特别是负压隔离病房&#xff0c;主要用于控制传染性疾病的扩散&#xff0c;保护医护人员和周围环境的安全。广州实验室装修公司中壹联凭借丰富的实验室装修…...

作文笔记10 复述故事

一、梳理内容&#xff08;用表格&#xff0c;示意图&#xff09; 救白蛇 得宝石 救相亲 变石头 人们纪念海力布 二、按顺序&#xff0c;不遗漏主要情节 &#xff08;猎人海力布热心救人&#xff09;救白蛇 得宝石&#xff08;白蛇强调宝石禁忌&#xff09;&#xff08;海力…...

业务安全蓝军测评标准解读—业务安全体系化

目录 1.前言 2.业务蓝军测评标准 2.1 业务安全脆弱性评分(ISVS) 2.2 ISVS评分的参考意义<...

关于焊点检测SJ-BIST)模块实现

关于焊点检测SJ-BIST&#xff09;模块实现 语言 &#xff1a;Verilg HDL 、VHDL EDA工具&#xff1a;ISE、Vivado、Quartus II 关于焊点检测SJ-BIST&#xff09;模块实现一、引言二、焊点检测功能的实现方法&#xff08;1&#xff09; 输入接口&#xff08;2&#xff09; 输出接…...

使用 Logback.xml 配置文件输出日志信息

官方链接&#xff1a;Chapter 3: Configurationhttps://logback.qos.ch/manual/configuration.html 配置使用 logback 的方式有很多种&#xff0c;而使用配置文件是较为简单的一种方式&#xff0c;下述就是简单描述一个 logback 配置文件基本的配置项&#xff1a; 由于 logba…...

Allegro-开店指南

开店指南 Allegro企业账户注册流程 Allegro注册流程分成两个主要阶段: 第一创建您的账户&#xff0c;第二激活您账户的销售功能。完成两个阶段&#xff0c;才能在Allegro进行销售。 中国企业应该入驻Business account&#xff08;企业账户&#xff09;。 第二阶段&#xff…...

Spring AI 第二讲 之 Chat Model API 第二节Ollama Chat

通过 Ollama&#xff0c;您可以在本地运行各种大型语言模型 (LLM)&#xff0c;并从中生成文本。Spring AI 通过 OllamaChatModel 支持 Ollama 文本生成。 先决条件 首先需要在本地计算机上运行 Ollama。请参阅官方 Ollama 项目 README&#xff0c;开始在本地计算机上运行模型…...

服务器环境搭建

服务器的使用。 本地服务器 虚拟机服务器 云服务器。 服务器配置内容 如何实现部署到云服务器&#xff1f; 环境部署是一件费劲的事。 自己一个人坚持慢慢弄&#xff0c;也能行。 但是要是一个组的人&#xff0c;问你怎么弄环境。 可就难了&#xff0c;不同的人部署的环境不同&…...

数仓建模—指标体系指标拆解和选取

数仓建模—指标拆解和选取 第一节指标体系初识介绍了什么是指标体系 第二节指标体系分类分级和评价管理介绍了指标体系管理相关的,也就是指标体系的分级分类 这一节我们看一下指标体系的拆解和指标选取,这里我们先说指标选取,其实在整个企业的数字化建设过程中我们其实最…...

微信小程序如何在公共组件中改变某一个页面的属性值

需求 公共组件A改变页面B的属性isShow的值。 思路 首先目前我不了解可以直接在组件中改变页面的值的方法&#xff0c;所以我通过监听的方式在B页面监听app.js的某一属性值的改变从而改变B页面的值&#xff0c;众所周知app.js的某一属性值是很容易就能更改的。 app.js globa…...

TCP/UDP的区别

首先来介绍一下什么是TCP和UDP TCP&#xff08;传输控制协议&#xff09;和UDP&#xff08;用户数据报协议&#xff09;是互联网协议套件中两个重要的传输层协议。它们在数据传输的方式、可靠性、连接性等方面有显著的区别。 总之他们两个就是个协议&#xff0c;协议也就是数…...

JavaWeb1 Json+BOM+DOM+事件监听

JS对象-Json //Json 字符串转JS对象 var jsObject Json.parse(userStr); //JS对象转JSON字符串 var jsonStr JSON.stringify(jsObject);JS对象-BOM BOM是浏览器对象模型&#xff0c;允许JS与浏览器对话 它包括5个对象&#xff1a;window、document、navigator、screen、hi…...

DSP6657 GPIO中断学习(只支持GPIO0-15)

1 简介 使用创龙板卡的KEY2按键通过中断的方式控制LED3的亮灭 2 中断学习 在C665x设备上&#xff0c;CPU中断是通过C66x CorePac中断控制器进行配置的。该中断控制器允许最多128个系统事件被编程到任意12个CPU可屏蔽中断输入&#xff08;CPUINT4至CPUINT15&#xff09;、CPU…...

vue数字翻盘,翻转效果

数字翻转的效果 实现数字翻转的效果上面为出来的样子 下面为代码&#xff0c;使用的时候直接引入&#xff0c;还有就是把图片的路径自己换成自己或者先用颜色替代&#xff0c;传入num和numlength即可 <template><div v-for"(item, index) in processedNums&quo…...

【简单讲解TalkingData的数据统计】

&#x1f3a5;博主&#xff1a;程序员不想YY啊 &#x1f4ab;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f917;点赞&#x1f388;收藏⭐再看&#x1f4ab;养成习惯 ✨希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出…...

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

XML Group端口详解

在XML数据映射过程中&#xff0c;经常需要对数据进行分组聚合操作。例如&#xff0c;当处理包含多个物料明细的XML文件时&#xff0c;可能需要将相同物料号的明细归为一组&#xff0c;或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码&#xff0c;增加了开…...

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

关于nvm与node.js

1 安装nvm 安装过程中手动修改 nvm的安装路径&#xff0c; 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解&#xff0c;但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后&#xff0c;通常在该文件中会出现以下配置&…...

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试&#xff0c;通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小&#xff0c;增大可提高计算复杂度duration: 测试持续时间&#xff08;秒&…...

【论文阅读28】-CNN-BiLSTM-Attention-(2024)

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

Angular微前端架构:Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例&#xff0c;其中使用的是 Module Federation 和 npx-build-plus 实现了主应用&#xff08;Shell&#xff09;与子应用&#xff08;Remote&#xff09;的集成。 &#x1f6e0;️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...