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