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

设置头像悬停手势

   img:hover{
      cursor: pointer;
    }

效果：

编写对话框

    <el-dialog class="bigAvatar"
               style="border-radius: 4px;"
               v-model="deleteDialogVisible"
               title="查看头像"
               top="5px"
    >
      <div>
        <img src="https://ts1.cn.mm.bing.net/th/id/R-C.21ac5d0d795612924ac4d6057f524a29?rik=Pulhr28FltN2yg&riu=http%3a%2f%2fedmassassin.com%2fwp-content%2fuploads%2f2015%2f02%2f1500-Kygo-ID.jpg&ehk=L%2fltqLmO7zOglHLZpG2o0gIGqumJrGodaFlaLpR%2fS4A%3d&risl=&pid=ImgRaw&r=0" alt=""
        >
      </div>
      <!--     可以自己加一些案件功能 比如放大镜-->
      <!--      <template #footer>-->
      <!--        <span class="dialog-footer">-->
      <!--          <el-button style="border-radius: 4px;" @click="handleDelete" type="danger">确定</el-button>-->
      <!--           <el-button style="border-radius: 4px;" @click="cancelDelete">取消</el-button>-->
      <!--        </span>-->
      <!--      </template>-->
    </el-dialog>

编写绑定点击事件

<img @click="checkAvatar" src="你的头像链接" alt="">

 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{
  //上面标题的样式
}

效果：