vue如何随心所欲调整el-dialog中body的样式

目录
  • vue调整el-dialog中body样式
  • 自定义el-dialog的样式
    • 1、默认dialog的样式
    • 2、项目需求是这样我们需要自定义的样式
    • 3、代码修改属性部分

vue调整el-dialog中body样式

<el-dialog
      :visible.sync="dialogVisible"
      width="30%"
      class="dialogClass"//设置弹框样式
      :showClose="showClo"
      :close-on-click-modal="false"
    >
      <div slot="title">
        <b>系统提示</b>
      </div>
      <el-row>
        <el-col :span="2">
          <svg-icon icon-class="warning" style="height:3em;weight:8em" class="iconClass" />
        </el-col>
        <el-col :span="22" style="padding-top:12px">
          <span style="font-size:16px;">
            当前设备编码与设备型号不符，请检查！
          </span>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button style="margin-left:7%"
          type="primary"
          plain
          @click="dialogVisible = false;"
        >确认</el-button>
      </span>
    </el-dialog>

.dialogClass .el-dialog__body {
  padding: 20px;
  padding-top: 0px;
  padding-bottom: 0px;
  margin-left: 20px;
  color: #606266;
  font-size: 14px;
}
.dialogClass .el-dialog__footer {
  text-align: right;
}
/*注意此样式不可以放在scope属性下面,否则样式不生效*/

自定义el-dialog的样式

1、默认dialog的样式

居中对其的状态是这样的

2、项目需求是这样我们需要自定义的样式

上下边框，以及圆角：

3、代码修改属性部分

在项目中直接修改不生效，可以加上deep属性来穿透改变，因为vue项目中style样式中都有scoped的，所以也不会影响其他页面的内容

// 修改弹框边框圆角
  /deep/.el-dialog.el-dialog--center {
    border-radius: 8px;
  }

  // 去掉弹框内容的默认padding值
  /deep/.el-dialog--center .el-dialog__body {
    padding: 0px;
    text-align: center;
  }

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解如何在vue+element-ui的项目中封装dialog组件

    1.问题起源 由于 Vue 基于组件化的设计,得益于这个思想,我们在 Vue 的项目中可以通过封装组件提高代码的复用性.根据我目前的使用心得,知道 Vue 拆分组件至少有两个优点: 1.代码复用. 2.代码拆分 在基于 element-ui 开发的项目中,可能我们要写出一个类似的调度弹窗功能,很容易编写出以下代码: <template> <div> <el-dialog :visible.sync="cnMapVisible">我是中国地图的弹窗&l

  • vue项目中实现el-dialog组件可拖拽效果

    vue项目中实现el-dialog组件可拖拽效果

    目录 0. 首先上图,看效果 1. 实现方法 参考资料 0. 首先上图,看效果 1. 实现方法 第一步:创建 drag.js文件 实现拖拽源码 /**  * 拖拽移动  * @param  {elementObjct} bar 鼠标点击控制拖拽的元素  * @param {elementObjct}  target 移动的元素  * @param {function}  callback 移动后的回调  */ export function startDrag(bar, target, call

  • vue-dialog的弹出层组件

    vue-dialog的弹出层组件

    本文章通过实现一个vue-dialog的弹出层组件,然后附加说明如果发布此包到npm,且能被其他项目使用. 功能说明 多层弹出时,只有一个背景层. 弹出层嵌入内部组件. 弹出层按钮支持回调 源码下载 实现 多层弹出时,只有一个背景层 利用两个组件实现,一个背景层组件(只提供一个背景层,组件名:background.vue),一个弹出层内容管理组件(实现多个内容层的管理,组件名:master.vue). 弹出层嵌入内部组件 使用vue的component组件实现,他可以完美支持. 弹出层按钮支持回

  • vue如何随心所欲调整el-dialog中body的样式

    vue如何随心所欲调整el-dialog中body的样式

    目录 vue调整el-dialog中body样式 自定义el-dialog的样式 1.默认dialog的样式 2.项目需求是这样我们需要自定义的样式 3.代码修改属性部分 vue调整el-dialog中body样式 <el-dialog :visible.sync="dialogVisible" width="30%" class="dialogClass"//设置弹框样式 :showClose="showClo" :c

  • vue3使用自定义指令实现el dialog拖拽功能示例详解

    目录 实现el-dialog的拖拽功能 通过自定义指令实现拖拽功能 实现拖拽功能 使用方式 实现el-dialog的拖拽功能 这里指的是 element-plus 的el-dialog组件,一开始该组件并没有实现拖拽的功能,当然现在可以通过设置属性的方式实现拖拽. 自带的拖拽功能非常严谨,拖拽时判断是否拖拽出窗口,如果出去了会阻止拖拽. 如果自带的拖拽功能可以满足需求的话,可以跳过本文. 通过自定义指令实现拖拽功能 因为要自己操作dom(设置事件),所以感觉还是使用自定义指令更直接一些,而且对原

  • Vue v2.5 调整和更新不完全问题

    Vue v2.5 调整和更新不完全问题

    Vue 2.5 Level E 发布了: 新功能特性一览 近日,Vue v2.5 发布,除了对 TypeScript 的更好的支持外,还有一些功能和语法的调整,你需要了解.本文,不谈 TypeScript,只对一些主要的调整进行说明. 本来,对 Vue 的版本升级不怎么敏感,所以没有太关注最近的 v2.5 的发布.今天,在重新下载 Vue 构建项目的时候,发现有好几个警告提示. 看警告提示,知道是因为使用了 v2.5 的 Vue,scoped slot 的语法进行了调整,然后去 GitHub 上

  • Spinner在Dialog中的使用效果实例代码详解

    背景: 记得很久以前,碰到一个需求场景,需要在Android Dialog中显示Spinner,用来进行选择操作.那个时候还很困惑,不知道是否可以这么搞.抱着试试看的心态,做起了实验,看起来效果还可行,不过最终还是选用了一个开源项目,效果看起来更棒. 代码演示: Spinner在Dialog中的使用,Dialog中关于view的xml布局. <?xml version="1.0" encoding="utf-8"?> <LinearLayout x

  • vue+elementui实现点击table中的单元格触发事件--弹框

    elementui中提供了点击行处理事件 查看位置: elementui的table事件 elementui的table中怎样点击某个单元格触发事件? 可以先看一下官网中table的自定义列模板代码 <template> <el-table :data="tableData" border style="width: 100%"> <el-table-column label="日期" width="180

  • vue实现拖动调整左右两侧容器大小

    vue实现拖动调整左右两侧容器大小

    本文实例为大家分享了vue实现拖动调整左右两侧容器大小的具体代码,供大家参考,具体内容如下 页面布局 <template>     <a-layout class="width-auto" id="product">         <div class="content">             <div id="left" class="left">  

  • Vue.js中的绑定样式实现

    Vue.js中的绑定样式实现

    目录 绑定class样式 1.字符串写法 2.数组写法 3.对象写法 style 绑定样式 scoped 绑定class样式 1.字符串写法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue初识</title> <script type="text/javascript"

  • 解决Vue编译时写在style中的路径问题

    解决Vue编译时写在style中的路径问题

    写在vue文件里面的style样式,在添加例如背景图片的时候,如果用的是相对路径,那么build出来的css文件的路径将会出错,导致找不到图片. 通过查找资料,在https://segmentfault.com/q/1010000008438061有人的回答解决了问题. 要修改主要有两个,一个就是config/index.js文件,将assetsPublicPath的路径改为'./',这是发布路径,如果构建后的产品文件有用于发布CDN或者放到其他域名的服务器,可以在这里进行设置设置之后构建的产品

  • Android中自定义的dialog中的EditText无法弹出输入法解决方案

    1.解决无法弹出输入法: 在show()方法调用之前,用dialog.setView(new EditText(context))添加一个空的EditText,由于是自定义的AlertDialog,有我们指定的布局,所以设置这个不会影响我们的功能,这样就可以弹出输入法了-- 2.可以弹出输入法了,但了为了增强用户体验性,当dialog中含有editText时应该,在显示dialog的同时自动弹出键盘: (1) 可以在自定义的dialog中增加如下方法: public void showKeybo

  • Android 开发之Dialog中隐藏键盘的正确使用方法

    Android 开发之Dialog中隐藏键盘的正确使用方法 场景:弹出一个Dialog,里面有一个EditText,用来输入内容,因为输入时,需要弹出键盘,所以当Dialog消失时,键盘要一起隐藏. 现在我们做一个自定义的Dialog MyDialog extends Dialog 一开始认为这个功能很容易实现,于是写了下面的代码 //Dialog的构造函数中写 this.setOnDismissListener(new OnDismissListener() { @Override publi

随机推荐