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