vue3 简易用对话框实现点击头像放大查看

 设置头像悬停手势

   img:hover{
      cursor: pointer;
    }

效果：

 编写对话框

编写绑定点击事件

 data(){
    return{
      deleteDialogVisible:false,
    }
  }

   checkAvatar(){
      this.deleteDialogVisible=true;
    },

 再自己自定义一些样式

.bigAvatar{
  background-color: rgb(255,255,255,0.2);
  div{
    display: flex;
    justify-content: center;
    align-items: center;

    img{
      width: 80vh;
    }
  }
}
.el-dialog__close{
  background-color: white;
}
.el-dialog__header{
  //上面标题的样式
}

 效果：