msgDialog.vue 1.52 KB
<template>
    <el-dialog
        custom-class="party-dialog msg-dialog noHeader"
        :visible.sync="dialogVisible"
        width="500px"
    >
    <div class="dialog-content">
        <img :src="getImgUrl()" alt="">
        <p>{{msgInfo.des}}</p>
    </div>
     <div slot="footer" class="dialog-footer btn-group">
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </div>
    </el-dialog>
</template>
<script>
export default {
    data(){
        return{
            dialogVisible:false,
        }
    },
    props:{
        msgInfo:{
            type: Object,
            default:()=>{
                return {
                    type:'',
                    des:''
                }
            }
        }
    },
    mounted(){

    },
    methods:{
        getImgUrl(){
            switch (this.msgInfo.type) {
                case "wait":
                    return require('@/assets/wait.png')
                    break;
                 case "success":
                    return require('@/assets/success.png')
                    break;
                default:
                    break;
            }
        }

    }
}
</script>
<style lang="less" scoped>
.party-dialog.msg-dialog{
    .dialog-content{
        img{
            display: block;
            width: 160px;
            margin:  0 auto;
        }
        p{
            font-size: 20px;
            color: @font-color;
            font-weight: bold;
            margin-top: 20px;
            text-align: center;
        }
    }

}
</style>