FileCard 文件卡片

用卡片的形式展示文件。

何时使用

• 用于在对话或输入时展示文件。

代码演示

基本

基础用法。

annual-report.pdf

1 MB

design.docx

256 KB

notes.md

12 KB

<script setup lang="tsx">
import { Flex } from 'ant-design-vue';
import { FileCard } from 'ant-design-x-vue';

defineOptions({ name: 'AXFileCardBasic' });

defineRender(() => {
  return (
    <Flex gap="middle" wrap="wrap">
      <FileCard name="annual-report.pdf" byte={1204 * 1024} />
      <FileCard name="design.docx" byte={256 * 1024} size="small" />
      <FileCard name="notes.md" byte={12 * 1024} />
    </Flex>
  );
});
</script>

隐藏源代码

列表

文件列表。

<script setup lang="tsx">
import { FileCard } from 'ant-design-x-vue';
import { ref } from 'vue';

defineOptions({ name: 'AXFileCardList' });

const items = ref([
  { name: 'product.pdf', byte: 1024 * 800 },
  { name: 'spec.docx', byte: 1024 * 320 },
  { name: 'demo.zip', byte: 1024 * 2048 },
]);

defineRender(() => {
  return (
    <FileCard.List
      items={items.value}
      removable
      onRemove={(item) => {
        items.value = items.value.filter((i) => i.name !== item.name);
      }}
    />
  );
});
</script>

隐藏源代码

API

FileCardProps

属性	说明	类型	默认值
name	文件名称	string	-
byte	文件大小（字节）	number	-
size	卡片大小	'small' | 'default'	'default'
description	文件描述	VNode | string | function	-
loading	是否加载中	boolean	false
type	文件类型	'file' | 'image' | 'audio' | 'video'	-
src	资源地址	string	-
icon	自定义图标	VNode | PresetIcons	-
onClick	点击回调	(info, event) => void	-

FileCard.List

属性	说明	类型	默认值
items	文件列表	FileCardProps[]	-
size	卡片大小	'small' | 'default'	-
removable	是否可移除	boolean | function	-
onRemove	移除回调	(item) => void	-
overflow	超出样式	'scrollX' | 'scrollY' | 'wrap'	-

贡献者

贡献者

正在加载贡献者信息...