8fd3ab4e by 任超
2 parents 25daaac4 128ffa16
......@@ -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;
padding: 16px;
background: linear-gradient(2deg, #00CCFF, transparent);
color: #ffffff;
}
.ls-title .svg-icon{
font-size: 18px;
}
.ls-mask-content {
padding: 20px;
text-align: center;
......@@ -126,30 +134,31 @@ export default {
.ls-mask-footer {
height: 65px;
border-top: 1px solid #f0f0f0;
display: flex;
justify-content: center;
position: absolute;
width: 100%;
bottom: 0px;
right: 0px;
background: #f3f3f3;
box-shadow: 0px 0px 2px 0px;
border-radius: 0 0 10px 10px;
}
/deep/.el-icon-close {
/deep/.closeStyle{
position: absolute;
top: 20px;
top: 17px;
right: 12px;
font-size: 20px;
cursor: pointer;
color: #ffffff;
}
/deep/.el-loading-mask {
background: none;
}
/deep/.el-button{
margin: 15px 10px;
width: 75px;
}
</style>
\ No newline at end of file
......
......@@ -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;
......