76847e29 by 任超
2 parents 43ac953b 13be7fe2
1 <template> 1 <template>
2 <transition name="fade" mode="out-in" v-if="isShow"> 2 <transition name="fade" mode="out-in" v-if="isShow">
3 <div class="ls-mask" v-loading="loading"> 3 <div class="ls-mask" v-loading="loading">
4 <div class="ls-mask-window" :style="{'width':width,'minHeight':height}"> 4 <div class="ls-mask-window" :style="{'width':width,'height':height}">
5 <div :style="{'text-align':titleStyle}"><b>{{title}}</b></div> 5 <div class="ls-head">
6 <i class="el-icon-close" @click="onCancel"></i> 6 <div class="ls-title" :style="{'text-align':titleStyle}"><b>{{title}}</b></div>
7 <div class="ls-mask-content"> 7 <i class="el-icon-close" @click="onCancel"></i>
8 </div>
9
10 <div class="ls-mask-content" ref='contentRef' :style="{'height': contentHeight + 'px'}">
8 <component :is="editItem" ref='childRef' @loading='loadingFn' :formData='formData' /> 11 <component :is="editItem" ref='childRef' @loading='loadingFn' :formData='formData' />
9 </div> 12 </div>
10 <div class="ls-mask-footer"> 13 <div class="ls-mask-footer">
...@@ -30,10 +33,12 @@ export default { ...@@ -30,10 +33,12 @@ export default {
30 editItem: "", 33 editItem: "",
31 titleStyle: 'center', 34 titleStyle: 'center',
32 width: "75%", 35 width: "75%",
33 height: "230px", 36 height: "auto",
34 formData: "",//父组件传递的参数 负责传给子组件 37 formData: "",//父组件传递的参数 负责传给子组件
38 contentHeight:"",
35 } 39 }
36 }, 40 },
41
37 props: { 42 props: {
38 loading: { type: Boolean, default: false }, 43 loading: { type: Boolean, default: false },
39 }, 44 },
...@@ -42,6 +47,12 @@ export default { ...@@ -42,6 +47,12 @@ export default {
42 this.editItem = this.loadViewFn(this.editItem) 47 this.editItem = this.loadViewFn(this.editItem)
43 }, 48 },
44 }, 49 },
50 mounted(){
51 // 计算滚动条高度
52 setTimeout(() => {
53 this.contentHeight = this.$refs.contentRef.offsetHeight
54 }, 1000);
55 },
45 methods: { 56 methods: {
46 onCancel () { 57 onCancel () {
47 this.isShow = false 58 this.isShow = false
...@@ -86,34 +97,43 @@ export default { ...@@ -86,34 +97,43 @@ export default {
86 } 97 }
87 98
88 .ls-mask-window { 99 .ls-mask-window {
89 padding-top: 20px;
90 background: white; 100 background: white;
91 position: absolute; 101 position: relative;
92 left: 50%; 102 left: 50%;
93 top: 50%; 103 top: 50%;
104 min-height: 200px;
94 transform: translate(-50%, -50%); 105 transform: translate(-50%, -50%);
95 border-radius: 10px; 106 border-radius: 10px;
96 } 107 }
97 108 .ls-head{
109 position: relative;
110 }
98 .ls-mask-window b { 111 .ls-mask-window b {
99 padding-left: 12px; 112 padding-left: 12px;
100 } 113 }
101 114 .ls-title{
115 padding: 20px;
116 background: #1E9FFF;
117 color: #ffffff;
118 }
102 .ls-mask-content { 119 .ls-mask-content {
103 padding: 20px; 120 padding: 20px;
104 text-align: center; 121 text-align: center;
122 position: absolute;
123 width: 100%;
124 overflow: scroll;
105 } 125 }
106 126
107 .ls-mask-footer { 127 .ls-mask-footer {
128 height: 65px;
108 border-top: 1px solid #f0f0f0; 129 border-top: 1px solid #f0f0f0;
109 display: flex; 130 display: flex;
110 justify-content: flex-end; 131 justify-content: center;
111 padding: 2px;
112 position: absolute; 132 position: absolute;
113 width: 98%; 133 width: 100%;
114 bottom: 10px; 134 bottom: 0px;
115 right: 12px; 135 right: 0px;
116 padding-top: 10px; 136 background: #202B3D;
117 } 137 }
118 138
119 /deep/.el-icon-close { 139 /deep/.el-icon-close {
...@@ -122,10 +142,14 @@ export default { ...@@ -122,10 +142,14 @@ export default {
122 right: 12px; 142 right: 12px;
123 font-size: 20px; 143 font-size: 20px;
124 cursor: pointer; 144 cursor: pointer;
145 color: #ffffff;
125 } 146 }
126 147
127 /deep/.el-loading-mask { 148 /deep/.el-loading-mask {
128 background: none; 149 background: none;
129 } 150 }
151 /deep/.el-button{
152 margin: 15px 10px;
153 }
130 </style> 154 </style>
131 155
...\ No newline at end of file ...\ No newline at end of file
......