style:弹框组件
Showing
4 changed files
with
39 additions
and
64 deletions
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> | ... | ... |
-
Please register or sign in to post a comment