<template>
|
<div class="publish-circle-friend-file-item-wrapper">
|
<slot />
|
<div v-if="status != 'success'" class="nut-uploader__preview__progress">
|
<template v-if="status != 'ready'">
|
<Failure v-if="status == 'error'" color="#fff" />
|
<Loading v-else name="loading" color="#fff" />
|
</template>
|
<view class="nut-uploader__preview__progress__msg">{{ message }}</view>
|
</div>
|
<div @click="emit('delete')" class="publish-circle-friend-file-item-del-wrapper">
|
<Failure color="rgba(0,0,0,0.6)" class="publish-circle-friend-file-item-del" />
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { Failure, Loading } from '@nutui/icons-vue-taro';
|
|
defineOptions({
|
name: 'FileWrapper',
|
});
|
|
type Props = {
|
status?: 'ready' | 'uploading' | 'success' | 'error';
|
message?: string;
|
};
|
|
const props = withDefaults(defineProps<Props>(), {
|
status: 'success',
|
});
|
|
const emit = defineEmits<{
|
(e: 'delete'): void;
|
}>();
|
</script>
|
|
<style lang="scss">
|
@import '@/styles/common.scss';
|
|
.publish-circle-friend-file-item-wrapper {
|
padding: 10px;
|
box-sizing: border-box;
|
// height: 150px;
|
width: 100%;
|
height: 100%;
|
position: relative;
|
|
&.video-wrapper {
|
width: 300px;
|
height: 150px;
|
}
|
|
.publish-circle-friend-file-item-del-wrapper {
|
padding: 20px;
|
position: absolute;
|
right: 4px;
|
top: 4px;
|
transform: translate(50%, -50%);
|
z-index: 100;
|
}
|
|
.publish-circle-friend-file-item-del {
|
--nut-icon-width: 30px;
|
--nut-icon-height: 30px;
|
display: block !important;
|
}
|
|
.publish-circle-friend-img-wrapper {
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
}
|
|
.publish-circle-friend-img {
|
// object-fit: cover;
|
width: 100%;
|
height: 100%;
|
}
|
|
.publish-circle-friend-video {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
</style>
|
