b741a01f by 任超

style:弹框组件

1 parent ee11c388
.dialogBox {
.el-dialog {
border-radius: 8px;
overflow: hidden;
background: #FFFFFF;
......@@ -44,6 +44,23 @@
}
}
.el-dialog__wrapper {
width: 100%;
height: 100%;
overflow: hidden;
}
.contentCenter {
position: absolute;
top: 50%;
left: 50%;
transform: translate(calc(-50% + 85px), -50%) !important;
}
.mainCenter {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) !important;
}
\ No newline at end of file
......
<template>
<el-dialog :visible.sync="dialogVisible" v-dialogDrag :width="width" @close="closeDialog('ruleForm', !showEnter)"
:fullscreen="fullscreen" top="0" :append-to-body="true" :lock-scroll="true" :close-on-click-modal="false"
custom-class="dialogBox" :destroy-on-close="true" :class="[customClass]" id="dialogBox" ref="dialogBox">
<el-dialog :visible.sync="dialogVisible" :width="width" :fullscreen="fullscreen" top="0" :append-to-body="true"
:lock-scroll="true" :close-on-click-modal="false" :custom-class="[isMain ? 'mainCenter' : 'contentCenter']"
:destroy-on-close="true" ref="dialogBox">
<div slot="title" class="dialog_title" ref="dialogTitle">
<b>{{ title }}</b>
<div v-if="isFullscreen" class="dialog_full">
......@@ -13,16 +13,10 @@
<slot></slot>
</div>
<div slot="footer" class="dialog_footer" ref="dialogFooter" v-if="isButton">
<div class="dialog_button" v-if="normal">
<el-button @click="closeDialog('ruleForm',)" v-if="isReset && !isSave && showEnter">确定</el-button>
<el-button @click="closeDialog('ruleForm', showEnter)" v-if="isReset">取消</el-button>
<el-button type="primary" plain @click="submitForm('ruleForm')" v-if="isSave" :loading="saveloding">
<div class="dialog_button">
<el-button @click="closeDialog(false)" v-if="isReset">取消</el-button>
<el-button type="primary" plain @click="submitForm" v-if="isSave" :loading="saveloding">
{{ saveButton }}</el-button>
</div>
<div class="dialog_button" v-else>
<el-button @click="closeDiaActivity(true)">确定</el-button>
<el-button @click="closeDiaActivity(false)">取消</el-button>
</div>
</div>
</el-dialog>
......@@ -30,18 +24,10 @@
<script>
export default {
props: {
value: { type: Boolean, default: false, },
activity: {
type: Boolean,
default: false,
},
normal: {
type: Boolean,
default: true,
},
showEnter: {
value: { type: Boolean, default: false },
isMain: {
type: Boolean,
default: true,
default: true
},
isButton: {
type: Boolean,
......@@ -49,7 +35,7 @@ export default {
},
multiple: {
type: Boolean,
default: false,
default: true,
},
width: {
type: String,
......@@ -59,14 +45,6 @@ export default {
type: String,
default: '',
},
customClass: {
type: String,
default: '',
},
topHeight: {
type: String,
default: '0',
},
isFullscreen: {
type: Boolean,
default: true,
......@@ -102,13 +80,6 @@ export default {
}
},
methods: {
isShow () {
this.dialogVisible = true
},
isHide () {
this.dialogVisible = false
this.key++
},
handleFullscreen () {
this.fullscreen = !this.fullscreen
let height = document.getElementById('dialogBox').clientHeight
......@@ -118,30 +89,25 @@ export default {
this.scrollerHeight = (window.innerHeight - 180) + 'px'
}
},
submitForm (ruleForm) {
submitForm () {
this.key++
this.$emit('input', false)
if (!this.multiple) {
this.$parent.submitForm(ruleForm)
this.$parent.submitForm()
} else {
this.$emit('submitForm', ruleForm);
this.$emit('submitForm');
}
},
closeDialog (ruleForm, flag) {
console.log(456789, this.multiple)
closeDialog () {
this.key++
this.$emit('input', false)
if (!this.multiple) {
if (this.$parent.closeDialog) {
// console.log(1)
this.$parent.closeDialog(ruleForm)
} else {
// console.log(2)
this.dialogVisible = false;
this.$parent.closeDialog()
}
} else {
this.$emit('closeDialog', ruleForm, flag);
this.$emit('closeDialog');
}
},
closeDiaActivity (flag) {
this.$emit('closeDialog', flag);
}
},
}
......
......@@ -21,18 +21,8 @@
top: -2px;
}
.dialog_footer {}
.el-form-item {
@include flex;
width: 100%;
}
.el-dialog__wrapper {
@include flex-center;
transform: translateX(80px);
}
.el-dialog {
margin: 0;
}
\ No newline at end of file
......
......@@ -37,6 +37,7 @@
<el-col :span="4" class="btnCol">
<el-form-item>
{{ isDialog }}
<el-button type="primary" @click="queryClick()">查询</el-button>
<el-button @click="moreQueryClick()">高级查询</el-button>
</el-form-item>
......@@ -51,6 +52,7 @@
@p-current-change="handleCurrentChange" :column="tableData.columns" :data="tableData.data">
</lb-table>
</div>
<dialogBox ref="dialog" title="标题" v-model="isDialog">
**在这里面写弹框内容**
</dialogBox>
......