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>