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-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>