b741a01f by 任超

style:弹框组件

1 parent ee11c388
1 .dialogBox { 1 .el-dialog {
2 border-radius: 8px; 2 border-radius: 8px;
3 overflow: hidden; 3 overflow: hidden;
4 background: #FFFFFF; 4 background: #FFFFFF;
...@@ -44,6 +44,23 @@ ...@@ -44,6 +44,23 @@
44 } 44 }
45 } 45 }
46 46
47
47 .el-dialog__wrapper { 48 .el-dialog__wrapper {
49 width: 100%;
50 height: 100%;
48 overflow: hidden; 51 overflow: hidden;
52 }
53
54 .contentCenter {
55 position: absolute;
56 top: 50%;
57 left: 50%;
58 transform: translate(calc(-50% + 85px), -50%) !important;
59 }
60
61 .mainCenter {
62 position: absolute;
63 top: 50%;
64 left: 50%;
65 transform: translate(-50%, -50%) !important;
49 } 66 }
...\ No newline at end of file ...\ No newline at end of file
......
1 <template> 1 <template>
2 <el-dialog :visible.sync="dialogVisible" v-dialogDrag :width="width" @close="closeDialog('ruleForm', !showEnter)" 2 <el-dialog :visible.sync="dialogVisible" :width="width" :fullscreen="fullscreen" top="0" :append-to-body="true"
3 :fullscreen="fullscreen" top="0" :append-to-body="true" :lock-scroll="true" :close-on-click-modal="false" 3 :lock-scroll="true" :close-on-click-modal="false" :custom-class="[isMain ? 'mainCenter' : 'contentCenter']"
4 custom-class="dialogBox" :destroy-on-close="true" :class="[customClass]" id="dialogBox" ref="dialogBox"> 4 :destroy-on-close="true" ref="dialogBox">
5 <div slot="title" class="dialog_title" ref="dialogTitle"> 5 <div slot="title" class="dialog_title" ref="dialogTitle">
6 <b>{{ title }}</b> 6 <b>{{ title }}</b>
7 <div v-if="isFullscreen" class="dialog_full"> 7 <div v-if="isFullscreen" class="dialog_full">
...@@ -13,16 +13,10 @@ ...@@ -13,16 +13,10 @@
13 <slot></slot> 13 <slot></slot>
14 </div> 14 </div>
15 <div slot="footer" class="dialog_footer" ref="dialogFooter" v-if="isButton"> 15 <div slot="footer" class="dialog_footer" ref="dialogFooter" v-if="isButton">
16 <div class="dialog_button" v-if="normal"> 16 <div class="dialog_button">
17 <el-button @click="closeDialog('ruleForm',)" v-if="isReset && !isSave && showEnter">确定</el-button> 17 <el-button @click="closeDialog(false)" v-if="isReset">取消</el-button>
18 <el-button @click="closeDialog('ruleForm', showEnter)" v-if="isReset">取消</el-button> 18 <el-button type="primary" plain @click="submitForm" v-if="isSave" :loading="saveloding">
19 <el-button type="primary" plain @click="submitForm('ruleForm')" v-if="isSave" :loading="saveloding">
20 {{ saveButton }}</el-button> 19 {{ saveButton }}</el-button>
21
22 </div>
23 <div class="dialog_button" v-else>
24 <el-button @click="closeDiaActivity(true)">确定</el-button>
25 <el-button @click="closeDiaActivity(false)">取消</el-button>
26 </div> 20 </div>
27 </div> 21 </div>
28 </el-dialog> 22 </el-dialog>
...@@ -30,18 +24,10 @@ ...@@ -30,18 +24,10 @@
30 <script> 24 <script>
31 export default { 25 export default {
32 props: { 26 props: {
33 value: { type: Boolean, default: false, }, 27 value: { type: Boolean, default: false },
34 activity: { 28 isMain: {
35 type: Boolean,
36 default: false,
37 },
38 normal: {
39 type: Boolean,
40 default: true,
41 },
42 showEnter: {
43 type: Boolean, 29 type: Boolean,
44 default: true, 30 default: true
45 }, 31 },
46 isButton: { 32 isButton: {
47 type: Boolean, 33 type: Boolean,
...@@ -49,7 +35,7 @@ export default { ...@@ -49,7 +35,7 @@ export default {
49 }, 35 },
50 multiple: { 36 multiple: {
51 type: Boolean, 37 type: Boolean,
52 default: false, 38 default: true,
53 }, 39 },
54 width: { 40 width: {
55 type: String, 41 type: String,
...@@ -59,14 +45,6 @@ export default { ...@@ -59,14 +45,6 @@ export default {
59 type: String, 45 type: String,
60 default: '', 46 default: '',
61 }, 47 },
62 customClass: {
63 type: String,
64 default: '',
65 },
66 topHeight: {
67 type: String,
68 default: '0',
69 },
70 isFullscreen: { 48 isFullscreen: {
71 type: Boolean, 49 type: Boolean,
72 default: true, 50 default: true,
...@@ -102,13 +80,6 @@ export default { ...@@ -102,13 +80,6 @@ export default {
102 } 80 }
103 }, 81 },
104 methods: { 82 methods: {
105 isShow () {
106 this.dialogVisible = true
107 },
108 isHide () {
109 this.dialogVisible = false
110 this.key++
111 },
112 handleFullscreen () { 83 handleFullscreen () {
113 this.fullscreen = !this.fullscreen 84 this.fullscreen = !this.fullscreen
114 let height = document.getElementById('dialogBox').clientHeight 85 let height = document.getElementById('dialogBox').clientHeight
...@@ -118,30 +89,25 @@ export default { ...@@ -118,30 +89,25 @@ export default {
118 this.scrollerHeight = (window.innerHeight - 180) + 'px' 89 this.scrollerHeight = (window.innerHeight - 180) + 'px'
119 } 90 }
120 }, 91 },
121 submitForm (ruleForm) { 92 submitForm () {
93 this.key++
94 this.$emit('input', false)
122 if (!this.multiple) { 95 if (!this.multiple) {
123 this.$parent.submitForm(ruleForm) 96 this.$parent.submitForm()
124 } else { 97 } else {
125 this.$emit('submitForm', ruleForm); 98 this.$emit('submitForm');
126 } 99 }
127 }, 100 },
128 closeDialog (ruleForm, flag) { 101 closeDialog () {
129 console.log(456789, this.multiple)
130 this.key++ 102 this.key++
103 this.$emit('input', false)
131 if (!this.multiple) { 104 if (!this.multiple) {
132 if (this.$parent.closeDialog) { 105 if (this.$parent.closeDialog) {
133 // console.log(1) 106 this.$parent.closeDialog()
134 this.$parent.closeDialog(ruleForm)
135 } else {
136 // console.log(2)
137 this.dialogVisible = false;
138 } 107 }
139 } else { 108 } else {
140 this.$emit('closeDialog', ruleForm, flag); 109 this.$emit('closeDialog');
141 } 110 }
142 },
143 closeDiaActivity (flag) {
144 this.$emit('closeDialog', flag);
145 } 111 }
146 }, 112 },
147 } 113 }
......
...@@ -21,18 +21,8 @@ ...@@ -21,18 +21,8 @@
21 top: -2px; 21 top: -2px;
22 } 22 }
23 23
24 .dialog_footer {}
25 24
26 .el-form-item { 25 .el-form-item {
27 @include flex; 26 @include flex;
28 width: 100%; 27 width: 100%;
29 }
30
31 .el-dialog__wrapper {
32 @include flex-center;
33 transform: translateX(80px);
34 }
35
36 .el-dialog {
37 margin: 0;
38 } 28 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -37,6 +37,7 @@ ...@@ -37,6 +37,7 @@
37 37
38 <el-col :span="4" class="btnCol"> 38 <el-col :span="4" class="btnCol">
39 <el-form-item> 39 <el-form-item>
40 {{ isDialog }}
40 <el-button type="primary" @click="queryClick()">查询</el-button> 41 <el-button type="primary" @click="queryClick()">查询</el-button>
41 <el-button @click="moreQueryClick()">高级查询</el-button> 42 <el-button @click="moreQueryClick()">高级查询</el-button>
42 </el-form-item> 43 </el-form-item>
...@@ -51,6 +52,7 @@ ...@@ -51,6 +52,7 @@
51 @p-current-change="handleCurrentChange" :column="tableData.columns" :data="tableData.data"> 52 @p-current-change="handleCurrentChange" :column="tableData.columns" :data="tableData.data">
52 </lb-table> 53 </lb-table>
53 </div> 54 </div>
55
54 <dialogBox ref="dialog" title="标题" v-model="isDialog"> 56 <dialogBox ref="dialog" title="标题" v-model="isDialog">
55 **在这里面写弹框内容** 57 **在这里面写弹框内容**
56 </dialogBox> 58 </dialogBox>
......