Optimized photo wall and other details.
parent
57957da06b
commit
02c0307a0e
@ -0,0 +1,107 @@
|
|||||||
|
<template>
|
||||||
|
<div class="photo-item">
|
||||||
|
<div class="photo-delete-button"
|
||||||
|
v-if="userStore.userId"
|
||||||
|
@click="deletePhoto">
|
||||||
|
删除
|
||||||
|
</div>
|
||||||
|
<el-image :src="imgThumb"
|
||||||
|
:alt="imgName"
|
||||||
|
style="width: 100%"
|
||||||
|
:preview-src-list="[imgSrc]"
|
||||||
|
:hide-on-click-modal="true"
|
||||||
|
fit="cover" lazy>
|
||||||
|
<template #placeholder>
|
||||||
|
<div class="image-slot">
|
||||||
|
加载中<span class="dot">...</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-image>
|
||||||
|
<span class="paragraph">{{imgName}}</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { useUserStore } from "@/stores/user";
|
||||||
|
import { ElMessage, ElMessageBox } from "element-plus";
|
||||||
|
import { deletePhotoById } from "@/services/photoApi";
|
||||||
|
|
||||||
|
const userStore = useUserStore();
|
||||||
|
const props = defineProps({
|
||||||
|
imgId: {
|
||||||
|
type: String,
|
||||||
|
default() {
|
||||||
|
return ''
|
||||||
|
},
|
||||||
|
},
|
||||||
|
imgThumb: {
|
||||||
|
type: String,
|
||||||
|
default() {
|
||||||
|
return ''
|
||||||
|
},
|
||||||
|
},
|
||||||
|
imgSrc: {
|
||||||
|
type: String,
|
||||||
|
default() {
|
||||||
|
return ''
|
||||||
|
},
|
||||||
|
},
|
||||||
|
imgName: {
|
||||||
|
type: String,
|
||||||
|
default() {
|
||||||
|
return ''
|
||||||
|
},
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const emits = defineEmits(['deletePhoto']);
|
||||||
|
|
||||||
|
const deletePhoto = () => {
|
||||||
|
ElMessageBox.confirm(
|
||||||
|
'确认删除这张图片吗?',
|
||||||
|
'警告',
|
||||||
|
{
|
||||||
|
confirmButtonText: '确认',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning',
|
||||||
|
}
|
||||||
|
)
|
||||||
|
.then(() => {
|
||||||
|
deletePhotoById(props.imgId.toString()).then(() => {
|
||||||
|
ElMessage({
|
||||||
|
type: 'success',
|
||||||
|
message: "删除成功！",
|
||||||
|
})
|
||||||
|
emits('deletePhoto')
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.catch()
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.photo-item {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo-item .photo-delete-button {
|
||||||
|
position: absolute;
|
||||||
|
right: 5px;
|
||||||
|
bottom: 3px;
|
||||||
|
width: 30px;
|
||||||
|
height: 20px;
|
||||||
|
z-index: 2;
|
||||||
|
display: none;
|
||||||
|
cursor: pointer;
|
||||||
|
background: red;
|
||||||
|
border-radius: 4px;
|
||||||
|
color: white;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo-item:hover .photo-delete-button {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue