Merge branch 'master' of http://yun.pashanhoo.com:9090/bdc/bdcdj-web
Showing
1 changed file
with
39 additions
and
15 deletions
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 | ... | ... |
-
Please register or sign in to post a comment