element-ui公用模态框自定义样式与scoped样式生效问题解决方案

//先插如效果图

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

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

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

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- 570px;
min-height: 300px;
max- 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 {
 auto !important;
}
}
}
</style>