//先插如效果图

里面内容均为传进来的.包括取消与确定按钮,因为每个页面的绑定事件不一样.

//下面这个图片为初始样式

//拖动模态框指令需要插件.详情看我下一篇,以下是地址

https://www.cnblogs.com/maruihua/p/10986082.html

<!--公用模态框
使用时传入
{
dialogtitle:'模态框的title',(可以为空)
dialogstatus:true显示模态框,false隐藏模态框(可以为空)
}
-->
<template>
<div class="dia " >
<el-dialog
:title="dialogtitle"
:visible.sync="dialogstatus"
:close-on-click-modal="false"
v-el-drag-dialog
@dragDialog="handleDrag"
:close-on-press-escape="false">
<slot></slot>
</el-dialog>
</div>
</template>
<script>
import elDragDialog from '../../directive/el-dragDialog/index'
export default {
//自定义指令:拖动模态框
directives: { elDragDialog },
//接受模态框数组[title,status]
props: ['publicdialogarray'],
components: {},
data() {
return {
dialogtitle: this.publicdialogarray.dialogtitle, //传入模态框的title
dialogstatus: this.publicdialogarray.dialogstatu //传入模态框的显示与隐藏
}
},
created() {},
methods: {
handleDrag() {} //拖动模态框事件
},
watch: {
//监听prop数组变化
publicdialogarray: {
handler() {
this.dialogtitle = this.publicdialogarray.dialogtitle || ''
this.dialogstatus = this.publicdialogarray.dialogstatu || false
},
immediate: true,
deep: true
}
}
}
</script>

//给dialog外边加一个div,然后在dialog添加/deep/就可以控制样式了

//因为添加scoped后不会污染全局样式,如果不怕污染全局样式可以直接不加scoped.即可!

<style lang="less" scoped>
//引用全局style样式
@import '../../styles/index.less';
// dialog的style样式
//自定义弧度
@border-radius: 4px !important; //border弧度
.dia {
/deep/.el-dialog {
border-radius: @border-radius;
box-shadow: 0px 0px 70px #333333;
top: 15%;
min-width: 570px;
min-height: 300px;
max-width: calc(100% - 1000px);
max-height: calc(100% - 30px);
display: flex;
flex-direction: column;
justify-content: space-between;
.el-dialog__body {
overflow: auto;
}
.el-dialog__header {
border-top-left-radius: @border-radius;
border-top-right-radius: @border-radius;
background-color: @dialogbackground;
line-height: 0em !important;
padding: 15px;
.el-dialog__title {
color: #fff; //字体颜色
}
}
.dialog-footer {
.el-button:nth-child(1) {
margin-left: 33%; //确定取消按钮中间间隔
}
.el-button:nth-child(2) {
margin-left: 10%; //确定取消按钮中间间隔
margin-right: 20%;
}
}
.divone {
float: left;
padding: 0px 15px;
margin-left: 10px;
margin-top: 10px;
background-color: #eeeeee;
}
.divonebottom {
clear: both;
border-bottom: 1px solid #eee;
height: 100%;
}
.el-icon-close:before {
color: #fff; //x的颜色
font-size: 1.4em; //x的大小
text-align: center;
position: relative;
bottom: 3px;
}
.el-input-number {
width: auto !important;
}
}
}
</style>

element-ui公用模态框自定义样式与scoped样式生效问题解决方案的更多相关文章

  1. 饿了么element UI<el-dialog>弹出层</el-dialog>修改默认样式不能在<style scoped>修改

    如果在非scoped下,修改el-dialog自动添加的DIV类名的style加上important,可以覆盖原来的width,但这样会让整个项目的样式都乱套. 如果在scoped下修改style.所 ...

  2. 基于element ui 实现七牛云自定义key上传文件,并监听更新上传进度

    借助上传Upload 上传组件的 http-request 覆盖默认的上传行为,可以自定义上传的实现 <el-upload multiple ref="sliderUpload&quo ...

  3. element ui change 传递带自定义参数

    @change="((val)=>{changeStatus(val, index)})" https://www.cnblogs.com/mmzuo-798/p/10438 ...

  4. element ui table单选框点击全选问题

    <template slot-scope="scope"> <el-radio-group v-model="scope.row.HandleState ...

  5. element ui下拉框如何实现默认选择?

    <template> <el-select v-model="value4" clearable placeholder="请选择"> ...

  6. element ui 下拉框绑定对象并且change传多个参数

    废话不说直接上代码说明真相. <template> <div class="hello"> <span>可以设置的属性 value-key=&q ...

  7. element ui,input框输入时enter健进行搜索

    <el-form-item label="企业名称"> <el-input v-model="formSearch.kw" @keyup.en ...

  8. BootStrap母版页布局.子页面布局.BootstrapTable.模态框.警告框.html导出tabl生成Excel.HTML生成柱图.饼图.时间控件中文版

    如上就是很多后台管理系统的母版页布局. 左边一列模板.上面一列系统标识. 空白处充填子页面 以ASP.NET MVC为基础 引入bootstrap.js.bootstrap.css body: < ...

  9. element ui form表单清空规则

    公司项目重构,经过商定使用element ui.在重构项目的时候发现一下element ui上很蛋疼的东西. 例如,这个form表单就是一个.趁着在高铁上没事,把想写的东西写一下. 先说一下eleme ...

随机推荐

  1. Codeforces 660E Different Subsets For All Tuples【组合数学】

    看了官方题解+q神的讲解才懂... 智商问题.. 讲道理..数学真的比脱单难啊... 题目链接: http://codeforces.com/problemset/problem/660/E 题意: ...

  2. spring-security 理解 笔记 介绍以及使用(持续更新)

    本人经过2周的学习,成功搭建了认证服务器,资源服务器和客户端 .下面是本人对 oauth2的理解,以及spring-security的使用,如果理解错误的地方,还望指正. 现在代码有点凌乱,过段时间会 ...

  3. java内存区域和对象的产生

    一直被java中内存组成弄的头晕眼花,这里总结下都有哪些,先上图片 程序计数器 小块内存,线程执行字节码的信号指示器,以此获取下一条需要执行的字节码指令,分支,循环,跳转,异常处理,线程恢复都要依赖他 ...

  4. hp 88a加粉

    http://v.youku.com/v_show/id_XNzEzODEwNzMy.html

  5. babel 用法及其 .babelrc 的配置详解,想做前端架构,拒绝一知半解...

    Babel 官方介绍:将 ECMAScript 2015 及其版本以后的 javascript 代码转为旧版本浏览器或者是环境中向后兼容版本的  javascript 代码. 简而言之,就是把不兼容的 ...

  6. 当Eclipse爱上SVN

    推荐使用:Subclipse  :http://jingyan.baidu.com/article/1612d5007d41e9e20e1eeeff.html 为离线安装做准备: 1.下载Subver ...

  7. 关于Scrum

    最近某些产品经理发出下两周的工作计划的时候,喜欢带上sprint这个字眼,看上去貌似是要走敏捷开发这一套,只可惜,我觉得他表现出来的是对敏捷开发和Scrum一窍不通,甚至对软件开发流程都完全不清楚,居 ...

  8. MongoDB使用入门

    1.MongoDB的安装 步骤一:下载MongoDB 下载安装包:http://fastdl.mongodb.org/linux/mongodb-linux-i686-2.0.4.tgz 步骤二:设置 ...

  9. JavaSE入门学习23:Java面向对象之构造方法

    学了JavaSE面向对象这一部分,也该对构造方法做一个总结了. 一构造方法 在多数情况下,初始化一个对象的终于步骤是去调用这个对象的构造方法. 构造方法负责对象的初始化工作,为 实例变量赋予合适的初始 ...

  10. 转载 Url编码

    http://www.cnblogs.com/artwl/archive/2012/03/07/2382848.html 混乱的URI编码 JavaScript中编码有三种方法:escape.enco ...