<template> <transition name="fade" mode="out-in" v-if="isShow"> <div class="ls-mask" v-loading="loading"> <div class="ls-mask-window" :style="{'width':width,'height':height}"> <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='close' class="closeStyle" @click="onCancel" /> </div> <div class="ls-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> export default { name: 'index', data () { return { btnShow: false, title: '提示', cancelText: '取消', confirmText: '确认', isSync: false, isShow: false, cancel: function () { }, confirm: function () { }, editItem: "", titleStyle: 'center', width: "75%", height: "auto", formData: undefined,//父组件传递的参数 负责传给子组件 contentHeight: "", iconClass: "", key: 0 } }, props: { loading: { type: Boolean, default: false }, }, watch: { isShow (a, b) { this.key++ this.editItem = this.loadViewFn(this.editItem) }, }, mounted () { // 计算滚动条高度 // setTimeout(() => { // if (this.btnShow) { // if (this.height == 'auto') { // this.contentHeight = (this.$refs.contentRef.offsetHeight - 200) + 'px' // } else { // this.contentHeight = this.height // } // } else { // if (this.height == 'auto') { // this.contentHeight = this.$refs.contentRef.offsetHeight // } else { // this.contentHeight = this.height // } // } // }, 500) }, methods: { onCancel () { this.isShow = false this.cancel() }, onConfirm () { this.loading = true let isOk = this.$refs.childRef.childFn() //子组件方法 必须命名一致 if (isOk || isOk == undefined) { //如果子组件没有 return false 就代表子组件方法一切正常 this.isShow = false this.confirm() } else { //否则 console.log('弹窗不关闭') } }, loadingFn (e) { //加载状态 this.loading = e }, loadViewFn (view) { return (r) => require.ensure([], () => r(require(`@/views/${view}.vue`)) ); } } } </script> <style scoped lang="scss" > .ls-mask { width: 100%; height: 100%; z-index: 2001; 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: 10px; } .ls-mask-window b { padding-left: 5px; } .ls-title { padding: 16px; color: #ffffff; background: linear-gradient(3deg, #409EFF, #a7cbee); border-top-left-radius: 5px; border-top-right-radius: 5px; overflow: hidden; } .ls-title .svg-icon { font-size: 18px; } .ls-mask-content { padding: 20px; width: 100%; overflow: 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>