<template> <transition name="msgbox-fade" v-if="myShow"> <div class="ls-mask" v-loading="loading"> <div class="ls-mask-window dialogBox" :style="{ 'width': width }"> <div class="ls-head"> <div class="ls-title" :style="{ 'text-align': titleStyle }"> <svg-icon v-if="iconClass != ''" :icon-class='iconClass' /> <b>{{ title }}</b> </div> <svg-icon icon-class='cancel' class="closeStyle" @click="onCancel" /> </div> <div class="mask-content" ref='contentRef' :style="{ 'height': contentHeight }"> <component :is="editItem" ref='childRef' @loading='loadingFn' :key="key" :formData='formData' /> </div> <div class="ls-mask-footer" v-if='btnShow'> <el-button type="primary" @click="onConfirm">{{ confirmText }}</el-button> <el-button @click="onCancel">{{ cancelText }}</el-button> </div> </div> </div> </transition> </template> <script> import Popup1 from './index' export default { name: 'index', data () { return { title: '标题', editItem: "", formData: undefined,//父组件传递的参数 负责传给子组件 btnShow: false, cancel: function () { }, confirm: function () { }, cancelText: '取消', confirmText: '确认', isSync: false, isShow: false, myShow: false, titleStyle: 'center', width: "75%", height: "auto", contentHeight: "", iconClass: "", key: 0 } }, props: { loading: { type: Boolean, default: false }, }, watch: { isShow (newValue) { this.editItem = this.loadViewFn(this.editItem) document.body.appendChild(this.$el); this.myShow = newValue } }, mounted () { // 计算滚动条高度 setTimeout(() => { if (this.btnShow) { if (this.height == 'auto') { this.contentHeight = (this.$refs.contentRef.offsetHeight) + 'px' } else { this.contentHeight = this.height } } else { if (this.height == 'auto') { this.contentHeight = (this.$refs.contentRef.offsetHeight) + 'px' } else { this.contentHeight = this.height } } }, 300) }, methods: { onCancel () { Popup1().close() }, onConfirm () { this.loading = true let res = new Promise((resolve, reject) => { this.confirm() resolve(true) }) if (res) { this.isShow = false } }, loadingFn (e) { //加载状态 this.loading = e }, loadViewFn (view) { return (r) => require.ensure([], () => r(require(`@/${view}.vue`)) ) } }, destroyed () { if (this.appendToBody && this.$el && this.$el.parentNode) { this.$el.parentNode.removeChild(this.$el); } } } </script> <style scoped lang="scss" > @import "~@/styles/mixin.scss"; @import "~@/styles/dialogBox.scss"; .ls-mask { width: 100%; height: 100%; z-index: 2000; position: fixed; left: 0; top: 0; background: rgba(0, 0, 0, 0.3); } .ls-mask-window { background: white; position: relative; left: 50%; top: 50%; min-height: 200px; transform: translate(-50%, -50%); border-radius: 5px; overflow: hidden; } .ls-mask-window b { padding-left: 5px; } /deep/.closeStyle { top: 7px !important; } .ls-title { padding: 10px; color: #ffffff; // background: linear-gradient(90deg, #1D66DC 0%, #081B56 100%); font-size: 16px; } .ls-title .svg-icon { font-size: 18px; } .mask-content { padding: 15px; width: 100%; min-height: 20%; max-height: 95%; // overflow-y: scroll; } .ls-mask-footer { height: 50px; display: flex; justify-content: center; width: 100%; position: absolute; border-top: 1px solid $borderColor; bottom: 0; background: #ffffff; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; overflow: hidden; } /deep/.closeStyle { position: absolute; top: 13px; right: 26px; font-size: 24px; cursor: pointer; color: #409EFF; } /deep/.el-loading-mask { background: none; } /deep/.el-button { margin: 8px 10px; width: 75px; } </style>