mirror of https://github.com/halo-dev/halo-admin
79 lines
1.9 KiB
Vue
79 lines
1.9 KiB
Vue
<script lang="ts" setup>
|
|
import { VButton, VCard, VModal } from "@halo-dev/components";
|
|
|
|
withDefaults(
|
|
defineProps<{
|
|
visible: boolean;
|
|
}>(),
|
|
{
|
|
visible: false,
|
|
}
|
|
);
|
|
|
|
const emit = defineEmits<{
|
|
(event: "update:visible", visible: boolean): void;
|
|
(event: "close"): void;
|
|
}>();
|
|
|
|
const attachments = Array.from(new Array(50), (_, index) => index).map(
|
|
(index) => {
|
|
return {
|
|
id: index,
|
|
name: `attachment-${index}`,
|
|
url: `https://picsum.photos/1000/700?random=${index}`,
|
|
size: "1.2MB",
|
|
type: "image/png",
|
|
strategy: "本地存储",
|
|
};
|
|
}
|
|
);
|
|
|
|
const onVisibleChange = (visible: boolean) => {
|
|
emit("update:visible", visible);
|
|
if (!visible) {
|
|
emit("close");
|
|
}
|
|
};
|
|
</script>
|
|
<template>
|
|
<VModal
|
|
:visible="visible"
|
|
:width="1240"
|
|
title="选择附件"
|
|
@update:visible="onVisibleChange"
|
|
>
|
|
<div class="w-full">
|
|
<ul
|
|
class="grid grid-cols-2 gap-x-2 gap-y-3 sm:grid-cols-3 md:grid-cols-2 xl:grid-cols-8 2xl:grid-cols-8"
|
|
role="list"
|
|
>
|
|
<li
|
|
v-for="(attachment, index) in attachments"
|
|
:key="index"
|
|
class="relative"
|
|
>
|
|
<VCard :body-class="['!p-0']">
|
|
<div
|
|
class="group aspect-w-10 aspect-h-7 block w-full cursor-pointer overflow-hidden bg-gray-100"
|
|
>
|
|
<img
|
|
:src="attachment.url"
|
|
alt=""
|
|
class="pointer-events-none object-cover group-hover:opacity-75"
|
|
/>
|
|
</div>
|
|
<p
|
|
class="pointer-events-none block truncate px-2 py-1 text-sm font-medium text-gray-700"
|
|
>
|
|
{{ attachment.name }}
|
|
</p>
|
|
</VCard>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<template #footer>
|
|
<VButton type="secondary" @click="onVisibleChange(false)">确定</VButton>
|
|
</template>
|
|
</VModal>
|
|
</template>
|