erp-el-element/Dialog/PopupMessage.vue

168 lines
3.7 KiB
Vue
Raw Normal View History

2024-05-07 11:30:13 +08:00
<template>
<div class="popup-message warning" :class="type">
<div class="pop-view">
<span class="pop-title">{{ this.tips || ''}}</span>
<p class="pop-content" v-if="this.msg">{{ this.msg }}</p>
<div class="pop-btn" v-if="button">
<el-button type="primary" class="save" @click="closeMessage">确定</el-button>
</div>
<i class="delete" @click="closeMessage"></i>
</div>
</div>
</template>
<script>
export default {
name: 'PopupMessage',
// props: ["timeVisible", "cfgData", "timeTitle"],
data() {
return {
//
callback: null,
tips: '',
type: '',
msg: '',
button: false,
duration: 0,
};
},
computed: {
//
},
methods: {
getParams(options) {
this.callBack = options.callBack;
this.type = options.type || ''
this.tips = options.tips || ''
this.msg = options.msg || ''
this.button = options.button || false
this.duration = options.duration || 0
this.changePosition()
if(this.duration > 0){
window.setTimeout(() => {
this.$destroy(true)
if(this.$el.parentNode){ // 当前节点是否已经被手动移除
this.$el.parentNode.removeChild(this.$el)
}
this.changePosition()
}, this.duration)
}
},
changePosition() {
let doc = document.body.getElementsByClassName('popup-message')
let sum = 0;
for(let i=0; i< doc.length; i++){
this.$nextTick(() => {
if(i>0){
sum = sum + document.body.getElementsByClassName('popup-message')[i-1].clientHeight + 5
document.body.getElementsByClassName('popup-message')[i].style = `top: ${sum}px`
}else{
document.body.getElementsByClassName('popup-message')[i].style = `top: 0`
}
})
}
},
closeMessage(){
this.$destroy(true)
this.$el.parentNode.removeChild(this.$el)
this.changePosition()
}
},
mounted() {
},
};
</script>
<style lang="scss" scoped>
.popup-message {
font-family: "Source Han Sans Regular";
color: #333333;
position: fixed;
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 500px;
height: fit-content;
border-radius: 8px;
background: #FFFFFF;
border: 1px solid #C2C2C2;
z-index: 9999;
.pop-view{
position: relative;
min-height: 120px;
height: auto;
padding-bottom: 13px;
.pop-title{
display: block;
font-size: 18px;
font-weight: 500;
padding: 13px 52px 9px 52px;
position: relative;
&::before{
position: absolute;
content: '';
// background-image: url('~@/assets/popup/warning.png');
width: 22px;
height: 22px;
left: 20px;
}
}
.pop-content{
font-weight: 400;
font-size: 14px;
padding: 0 52px 5px 52px;
}
.pop-btn{
display: flex;
justify-content: flex-end;
.save{
margin-right: 20px;
}
}
.delete{
position: absolute;
content: '';
// background-image: url('~@/assets/popup/delete.png');
width: 22px;
height: 22px;
top: 18px;
right: 23px;
}
}
}
.success{
background: #F6FFED;
border: 1px solid #73D13D;
color: #73D13D;
.pop-view{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.pop-view>.pop-title{
&::before{
// background-image: url('~@/assets/popup/success.png');
}
}
}
.error{
background: #FFF1F0;
border: 1px solid #FF7875;
// color: #FF7875;
.pop-view>.pop-title{
&::before{
// background-image: url('~@/assets/popup/error.png');
}
}
}
</style>