11
Showing
4 changed files
with
16 additions
and
6 deletions
| ... | @@ -3,8 +3,11 @@ | ... | @@ -3,8 +3,11 @@ | 
| 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,'height':height}"> | 4 | <div class="ls-mask-window" :style="{'width':width,'height':height}"> | 
| 5 | <div class="ls-head"> | 5 | <div class="ls-head"> | 
| 6 | <div class="ls-title" :style="{'text-align':titleStyle}"><b>{{title}}</b></div> | 6 | <div class="ls-title" :style="{'text-align':titleStyle}"> | 
| 7 | <i class="el-icon-close" @click="onCancel"></i> | 7 | <svg-icon v-if="iconClass!=''" :icon-class='iconClass' /> | 
| 8 | <b>{{title}}</b> | ||
| 9 | </div> | ||
| 10 | <svg-icon icon-class='close' class="closeStyle" @click="onCancel" /> | ||
| 8 | </div> | 11 | </div> | 
| 9 | 12 | ||
| 10 | <div class="ls-mask-content" ref='contentRef' :style="{'height': contentHeight + 'px'}"> | 13 | <div class="ls-mask-content" ref='contentRef' :style="{'height': contentHeight + 'px'}"> | 
| ... | @@ -36,6 +39,7 @@ export default { | ... | @@ -36,6 +39,7 @@ export default { | 
| 36 | height: "auto", | 39 | height: "auto", | 
| 37 | formData: "",//父组件传递的参数 负责传给子组件 | 40 | formData: "",//父组件传递的参数 负责传给子组件 | 
| 38 | contentHeight:"", | 41 | contentHeight:"", | 
| 42 | iconClass:"", | ||
| 39 | } | 43 | } | 
| 40 | }, | 44 | }, | 
| 41 | 45 | ||
| ... | @@ -109,13 +113,17 @@ export default { | ... | @@ -109,13 +113,17 @@ export default { | 
| 109 | position: relative; | 113 | position: relative; | 
| 110 | } | 114 | } | 
| 111 | .ls-mask-window b { | 115 | .ls-mask-window b { | 
| 112 | padding-left: 12px; | 116 | padding-left: 5px; | 
| 113 | } | 117 | } | 
| 114 | .ls-title{ | 118 | .ls-title{ | 
| 115 | padding: 20px; | 119 | padding: 20px; | 
| 116 | background: #1E9FFF; | 120 | background: #1E9FFF; | 
| 117 | color: #ffffff; | 121 | color: #ffffff; | 
| 122 | |||
| 118 | } | 123 | } | 
| 124 | .ls-title .svg-icon{ | ||
| 125 | font-size: 18px; | ||
| 126 | } | ||
| 119 | .ls-mask-content { | 127 | .ls-mask-content { | 
| 120 | padding: 20px; | 128 | padding: 20px; | 
| 121 | text-align: center; | 129 | text-align: center; | 
| ... | @@ -136,7 +144,8 @@ export default { | ... | @@ -136,7 +144,8 @@ export default { | 
| 136 | background: #f3f3f3; | 144 | background: #f3f3f3; | 
| 137 | } | 145 | } | 
| 138 | 146 | ||
| 139 | /deep/.el-icon-close { | 147 | |
| 148 | /deep/.closeStyle{ | ||
| 140 | position: absolute; | 149 | position: absolute; | 
| 141 | top: 20px; | 150 | top: 20px; | 
| 142 | right: 12px; | 151 | right: 12px; | 
| ... | @@ -144,7 +153,6 @@ export default { | ... | @@ -144,7 +153,6 @@ export default { | 
| 144 | cursor: pointer; | 153 | cursor: pointer; | 
| 145 | color: #ffffff; | 154 | color: #ffffff; | 
| 146 | } | 155 | } | 
| 147 | |||
| 148 | /deep/.el-loading-mask { | 156 | /deep/.el-loading-mask { | 
| 149 | background: none; | 157 | background: none; | 
| 150 | } | 158 | } | ... | ... | 
| ... | @@ -13,6 +13,7 @@ | ... | @@ -13,6 +13,7 @@ | 
| 13 | cancelText:"" //取消按钮的文字 | 13 | cancelText:"" //取消按钮的文字 | 
| 14 | cancel: function () {}, //取消事件的回调 | 14 | cancel: function () {}, //取消事件的回调 | 
| 15 | confirm: function () {}, //确认事件的回调 | 15 | confirm: function () {}, //确认事件的回调 | 
| 16 | iconClass:"",//标题前面icon图标名称 | ||
| 16 | }) | 17 | }) | 
| 17 | 3.子组件的方法名字必须统一为 childFn() | 18 | 3.子组件的方法名字必须统一为 childFn() | 
| 18 | 4.子组件切记props接收 父组件传参formData | 19 | 4.子组件切记props接收 父组件传参formData | ... | ... | 
src/image/icons/svg/close.svg
0 → 100644
| 1 | <svg t="1665567795982" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2615" width="200" height="200"><path d="M512 74.666667C270.933333 74.666667 74.666667 270.933333 74.666667 512S270.933333 949.333333 512 949.333333 949.333333 753.066667 949.333333 512 753.066667 74.666667 512 74.666667z m0 810.666666c-204.8 0-373.333333-168.533333-373.333333-373.333333S307.2 138.666667 512 138.666667 885.333333 307.2 885.333333 512 716.8 885.333333 512 885.333333z" p-id="2616"></path><path d="M657.066667 360.533333c-12.8-12.8-32-12.8-44.8 0l-102.4 102.4-102.4-102.4c-12.8-12.8-32-12.8-44.8 0-12.8 12.8-12.8 32 0 44.8l102.4 102.4-102.4 102.4c-12.8 12.8-12.8 32 0 44.8 6.4 6.4 14.933333 8.533333 23.466666 8.533334s17.066667-2.133333 23.466667-8.533334l102.4-102.4 102.4 102.4c6.4 6.4 14.933333 8.533333 23.466667 8.533334s17.066667-2.133333 23.466666-8.533334c12.8-12.8 12.8-32 0-44.8l-106.666666-100.266666 102.4-102.4c12.8-12.8 12.8-34.133333 0-46.933334z" p-id="2617"></path></svg> | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file | 
| ... | @@ -229,7 +229,7 @@ export default { | ... | @@ -229,7 +229,7 @@ export default { | 
| 229 | height: calc(100% - 80px); | 229 | height: calc(100% - 80px); | 
| 230 | align-items: center; | 230 | align-items: center; | 
| 231 | background: rgba(194, 190, 190, 0.1); | 231 | background: rgba(194, 190, 190, 0.1); | 
| 232 | 232 | overflow: scroll; | |
| 233 | img { | 233 | img { | 
| 234 | display: block; | 234 | display: block; | 
| 235 | object-fit: scale-down; | 235 | object-fit: scale-down; | ... | ... | 
- 
Please register or sign in to post a comment