如何用ppt做网站/合肥建站公司seo

上篇中(https://blog.csdn.net/maidu_xbd/article/details/104350286)通过hover实现鼠标移入图片出现删除按钮功能，存在问题：当未上传照片时，鼠标移入方框区域，仍显示删除图标。

通过onmouseover，onmouseout优化代码如下：

<template><div class="personal"><div class="content"><!-- 1.标题及图像说明 --><div class="content-desc"><div class="title">上传照片</div><div class="desc">照片要求:格式为jpg/jpeg/png</div></div><!-- 2.图像区域 --><div class="content-image"><el-form :model="modal"><el-form-item prop="base64"><el-inputtype="text"style="display:none;"name="base64"v-model="modal.base64"autocomplete="off"></el-input><div class="upload-photo"><li v-on:mouseover="mouseoverImg()" v-on:mouseout="mouseoutImg()"><img ref="img" src="../assets/images/addImage.png" @click="uploadPhoto" /><div ref="imgDelete" class="delete-img"><i class="el-icon-delete" @click="deleteImg()"></i></div></li></div><input type="file" hidden ref="photoFile" @change="fileChange" style="display: none;" /></el-form-item></el-form></div></div></div>
</template>
<script>
export default {data() {return {modal: { base64: "" },deleteFlag: false,uploadImage: ""};},components: {},mounted() {//uploadImage为【添加照片】图像this.uploadImage = this.$refs.img.src;this.$refs.imgDelete.style.display = "none";},methods: {// 鼠标移入图片mouseoverImg() {if (this.$refs.img.src == this.uploadImage) {this.$refs.imgDelete.style.display = "none";} else {this.$refs.imgDelete.style.display = "block";}},// 鼠标移出图片mouseoutImg() {this.$refs.imgDelete.style.display = "none";},// 本地上传头像uploadPhoto() {this.$refs.photoFile.click();},// 修改头像fileChange(e) {let file = this.$refs.photoFile.files[0];if (/.(png|jpg|jpeg)$/.test(file.name)) {let fr = new FileReader();fr.readAsDataURL(file);fr.onload = e => {this.$refs.img.src = e.target.result;this.$refs.photoFile.value = "";this.$set(this.modal, "base64", e.target.result.split(",")[1]);};} else {this.$message({message: "请选择符合格式要求的图片",type: "warning"});this.$refs.photoFile.value = "";}},// 删除图片deleteImg() {this.$confirm("是否删除该照片?", "删除", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning"}).then(() => {this.$refs.img.src = this.uploadImage;this.$refs.imgDelete.style.display = "none";this.$message({type: "success",message: "删除成功!"});}).catch(() => {this.$message({type: "info",message: "已取消删除"});});}}
};
</script>
<style lang="less">
.personal {margin: 10px 0;padding: 10px;background: #f0f0f0;width: 100%;height: 100%;box-sizing: border-box;overflow-y: hidden;border-radius: 3px;padding-bottom: 20px;.content {background-color: #fff;width: 100%;height: 100%;border-radius: 6px;padding: 10px;// overflow-y: scroll;overflow: hidden;display: flex;padding: 10px 0;flex-direction: column;//  1.标题及图像说明.content-desc {margin: 0px 10px;.title {font-size: 16px;border-left: 5px solid #2d8cf0;padding-left: 10px;margin-bottom: 16px;}.desc {margin-left: 18px;}}// 2.图像区域.content-image {margin: 25px 28px;.upload-photo {width: 580px;height: 200px;box-sizing: border-box;border-radius: 5px;cursor: pointer;margin-left: 20px;margin-top: 0px;padding-top: 0px;display: flex;flex-direction: row;justify-content: flex-start;li {width: 180px;height: 180px;margin-right: 15px;position: relative;.delete-img {display: block;position: absolute;width: 180px;height: 40px;line-height: 40px;left: 0px;top: 140px;background: rgba(59, 60, 61, 0.5);// box-sizing: content-box;z-index: 999;cursor: pointer;text-align: right;i {margin: 8px 10px 0 0;display: block;font-size: 24px;color: white;}}img {border: 1px dashed #d9d9d9;border-radius: 5px;box-sizing: border-box;width: 180px;height: 180px;margin-top: 0px;&:hover {border: 1px dashed #409eff;}}}}}}
}
</style>