11

@@ -3,8 +3,11 @@
     <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}"><b>{{title}}</b></div>
-          <i class="el-icon-close" @click="onCancel"></i>
+          <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 + 'px'}">
@@ -36,6 +39,7 @@ export default {
       height: "auto",
       formData: "",//父组件传递的参数 负责传给子组件
       contentHeight:"",
+      iconClass:"",
     }
   },
   
@@ -109,13 +113,17 @@ export default {
   position: relative;
 }
 .ls-mask-window b {
-  padding-left: 12px;
+  padding-left: 5px;
 }
 .ls-title{
   padding: 20px;
   background: #1E9FFF;
   color: #ffffff;
+  
 }
+.ls-title .svg-icon{
+    font-size: 18px;
+  }
 .ls-mask-content {
   padding: 20px;
   text-align: center;
@@ -136,7 +144,8 @@ export default {
   background: #f3f3f3;
 }
 
-/deep/.el-icon-close {
+
+/deep/.closeStyle{
   position: absolute;
   top: 20px;
   right: 12px;
@@ -144,7 +153,6 @@ export default {
   cursor: pointer;
   color: #ffffff;
 }
-
 /deep/.el-loading-mask {
   background: none;
 }

@@ -13,6 +13,7 @@
           cancelText:"" //取消按钮的文字
           cancel: function () {}, //取消事件的回调
           confirm: function () {}, //确认事件的回调
+          iconClass:"",//标题前面icon图标名称
         })    
 3.子组件的方法名字必须统一为 childFn()
 4.子组件切记props接收 父组件传参formData  

+<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

@@ -229,7 +229,7 @@ export default {
     height: calc(100% - 80px);
     align-items: center;
     background: rgba(194, 190, 190, 0.1);
-
+    overflow: scroll;
     img {
       display: block;
       object-fit: scale-down;