github
/
halo-admin
mirror of https://github.com/halo-dev/halo-admin
1
0
Fork 0
Code Issues Releases Wiki Activity

pref: attachments preview image styles (#374)

pull/375/head
felix 2021-11-09 17:32:18 +08:00 committed by GitHub
parent b59dd62157
commit d3eb288327
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 46 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/Attachment/AttachmentSelectDrawer.vue
View File

@ -15,17 +15,22 @@
<a-divider />
<a-row type="flex" align="middle">
<a-col :span="24">
<a-spin :spinning="loading">
<a-spin :spinning="loading" class="attachments-group">
<a-empty v-if="attachments.length === 0" />
<div
v-else
class="attach-item"
class="attach-item attachments-group-item"
v-for="(item, index) in attachments"
:key="index"
@click="handleSelectAttachment(item)"
>
<span v-show="!handleJudgeMediaType(item)">当前格式不支持预览</span>
<img :src="item.thumbPath" v-show="handleJudgeMediaType(item)" loading="lazy" />
<span v-if="!handleJudgeMediaType(item)" class="attachments-group-item-type">{{ item.suffix }}</span>
<span
v-else
class="attachments-group-item-img"
:style="`background-image:url(${item.thumbPath})`"
loading="lazy"
/>
</div>
</a-spin>
</a-col>

19
src/styles/global.less
View File

@ -814,6 +814,25 @@ body {
top: 0;
}
// 附件图片样式
.attachments-group {
&-item {
padding: 0;
height: 140px;
&-img {
display: block;
height: 100%;
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
}
.attachments-group &-type {
font-size: 38px;
text-transform: capitalize;
}
}
}
.ant-affix {
z-index: 1000 !important;
}

12
src/views/attachment/AttachmentList.vue
View File

@ -71,6 +71,7 @@
</a-col>
<a-col :span="24">
<a-list
class="attachments-group"
:grid="{ gutter: 12, xs: 2, sm: 2, md: 4, lg: 6, xl: 6, xxl: 6 }"
:dataSource="formattedDatas"
:loading="listLoading"
@ -82,9 +83,14 @@
@click="handleShowDetailDrawer(item)"
@contextmenu.prevent="handleContextMenu($event, item)"
>
<div class="attach-thumb">
<span v-show="!handleJudgeMediaType(item)">当前格式不支持预览</span>
<img :src="item.thumbPath" v-show="handleJudgeMediaType(item)" loading="lazy" />
<div class="attach-thumb attachments-group-item">
<span v-if="!handleJudgeMediaType(item)" class="attachments-group-item-type">{{ item.suffix }}</span>
<span
v-else
class="attachments-group-item-img"
:style="`background-image:url(${item.thumbPath})`"
loading="lazy"
/>
</div>
<a-card-meta class="p-3">
<ellipsis :length="isMobile() ? 12 : 16" tooltip slot="description">{{ item.name }}</ellipsis>

13
src/views/attachment/components/AttachmentDrawer.vue
View File

@ -15,18 +15,23 @@
<a-divider />
<a-row type="flex" align="middle">
<a-col :span="24">
<a-spin :spinning="loading">
<a-spin :spinning="loading" class="attachments-group">
<a-empty v-if="formattedDatas.length === 0" />
<div
v-else
class="attach-item"
class="attach-item attachments-group-item"
v-for="(item, index) in formattedDatas"
:key="index"
@click="handleShowDetailDrawer(item)"
@contextmenu.prevent="handleContextMenu($event, item)"
>
<span v-show="!handleJudgeMediaType(item)">当前格式不支持预览</span>
<img :src="item.thumbPath" v-show="handleJudgeMediaType(item)" loading="lazy" />
<span v-if="!handleJudgeMediaType(item)" class="attachments-group-item-type">{{ item.suffix }}</span>
<span
v-else
class="attachments-group-item-img"
:style="`background-image:url(${item.thumbPath})`"
loading="lazy"
/>
</div>
</a-spin>
</a-col>