当前位置：首页 > news >正文

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

news 2025/7/9 5:51:43

设置头像悬停手势

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

效果：