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; |
| 49 | } | 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; | ||
| 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, | 29 | type: Boolean, |
| 40 | default: true, | 30 | default: true |
| 41 | }, | ||
| 42 | showEnter: { | ||
| 43 | type: Boolean, | ||
| 44 | 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 | } | 28 | } |
| ... | \ No newline at end of file | ... | \ No newline at end of file |
| 30 | |||
| 31 | .el-dialog__wrapper { | ||
| 32 | @include flex-center; | ||
| 33 | transform: translateX(80px); | ||
| 34 | } | ||
| 35 | |||
| 36 | .el-dialog { | ||
| 37 | margin: 0; | ||
| 38 | } | ||
| ... | \ 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