164 lines
3.3 KiB
Vue
164 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
|
const props = defineProps({
|
|
item: {
|
|
type: Object,
|
|
default: () => ({})
|
|
} as any,
|
|
})
|
|
const emit = defineEmits([
|
|
'sketchRestore','sketchDelete'
|
|
])
|
|
let data = reactive({
|
|
})
|
|
|
|
const morePopoverRef = ref(null)
|
|
const handleClick = ()=>{
|
|
morePopoverRef.value?.hide()
|
|
}
|
|
|
|
const sketchRestore = ()=>{
|
|
emit('sketchRestore')
|
|
handleClick()
|
|
}
|
|
const sketchDelete = ()=>{
|
|
emit('sketchDelete')
|
|
handleClick()
|
|
}
|
|
|
|
onMounted(()=>{
|
|
})
|
|
onUnmounted(()=>{
|
|
})
|
|
defineExpose({})
|
|
const {} = toRefs(data);
|
|
</script>
|
|
<template>
|
|
<div class="generateItem">
|
|
<div v-if="item.type === 'waiting'" class="waitingItem">
|
|
等待
|
|
<!-- <el-spinner style="display: inline-block;" /> -->
|
|
</div>
|
|
|
|
<div v-else-if="item.type === 'success'" class="successItem">
|
|
<img :src="item.img" alt="">
|
|
<div class="more">
|
|
<el-popover
|
|
width="10rem"
|
|
min-width="10rem"
|
|
ref="morePopoverRef"
|
|
trigger="click"
|
|
popper-class="moreBox"
|
|
placement="bottom-end"
|
|
>
|
|
<template #reference>
|
|
<span class="icon"><svg-icon name="more" size="25" /></span>
|
|
</template>
|
|
<template #default>
|
|
<div class="item" @click="sketchRestore">
|
|
<div class="icon">
|
|
<SvgIcon name="sketchRestore" size="14" />
|
|
</div>
|
|
<span>{{ $t('generateSketch.restore') }}</span>
|
|
</div>
|
|
<div class="item delete" @click="sketchDelete">
|
|
<div class="icon">
|
|
<SvgIcon name="sketchDelete" size="14" />
|
|
</div>
|
|
<span>{{ $t('generateSketch.delete') }}</span>
|
|
</div>
|
|
</template>
|
|
</el-popover>
|
|
</div>
|
|
<div class="edit" @click="$emit('edit')">
|
|
<span>{{ $t('generateSketch.edit') }}</span>
|
|
<div class="icon">
|
|
<SvgIcon name="generateSketchEdit" size="7" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style lang="less">
|
|
.el-popover.el-popper.moreBox{
|
|
border-radius: 1rem;
|
|
padding: .6rem .7rem;
|
|
min-width: 10rem;
|
|
.item{
|
|
display: flex;
|
|
cursor: pointer;
|
|
border-radius: .4rem;
|
|
align-items: center;
|
|
padding: .6rem .7rem;
|
|
margin-bottom: 1.2rem;
|
|
&.delete{
|
|
margin-bottom: 0rem;
|
|
color: #ff4747;
|
|
}
|
|
&:hover{
|
|
background-color: #f6f6f6;
|
|
}
|
|
> .icon{
|
|
margin-right: .7rem;
|
|
}
|
|
> span{
|
|
color: #000;
|
|
font-weight: 500;
|
|
font-size: 1.3rem;
|
|
line-height: 100%;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<style lang="less" scoped>
|
|
.generateItem{
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
> div{
|
|
position: relative;
|
|
}
|
|
> .waitingItem,.successItem{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
> .successItem{
|
|
> .more{
|
|
position: absolute;
|
|
top: 1.2rem;
|
|
right: 1.2rem;
|
|
transition: all .3s;
|
|
border-radius: .3rem;
|
|
&:hover{
|
|
background-color: #e8e8e8;
|
|
}
|
|
.icon{
|
|
width: 2.4rem;
|
|
height: 2.4rem;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
> .edit{
|
|
position: absolute;
|
|
bottom: 1rem;
|
|
right: 1rem;
|
|
border-radius: 2rem;
|
|
border: 2px solid #e5e5e5;
|
|
background-color: #fff;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: .65rem 1.2rem;
|
|
cursor: pointer;
|
|
> span{
|
|
margin-right: .6rem;
|
|
font-weight: 500;
|
|
font-size: 1.4rem;
|
|
line-height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |