表单

Attachment 文件附件

用于文件附件场景的 MoriUI 组件。

资源

组件源码问题反馈

导入 

import { Attachment, AttachmentAction, AttachmentActions, AttachmentContent, AttachmentDescription, AttachmentGroup, AttachmentMedia, AttachmentTitle, AttachmentTrigger } from 'moriui'

组合方式

Attachment 以 Media、Content、Actions 与可选 Trigger 组合文件元数据和操作；AttachmentGroup 负责横向附件集合。

上传状态

state 支持 idle、uploading、processing、error 与 done；错误说明需要保留文字，不能只依赖颜色。

可访问操作

AttachmentAction 与覆盖整卡的 AttachmentTrigger 都是独立可聚焦目标；仅图标操作必须提供 aria-label。

示例

概览

展示文件媒体、元数据与移除操作。

产品规划.pdfPDF · 2.4 MB
<script setup lang="ts">
  import { FileText, X } from '@lucide/vue'
  import {
    Attachment,
    AttachmentAction,
    AttachmentActions,
    AttachmentContent,
    AttachmentDescription,
    AttachmentMedia,
    AttachmentTitle
  } from 'moriui'
</script>

<template>
  <Attachment class="w-full max-w-sm">
    <AttachmentMedia><FileText /></AttachmentMedia>
    <AttachmentContent>
      <AttachmentTitle>产品规划.pdf</AttachmentTitle>
      <AttachmentDescription>PDF · 2.4 MB</AttachmentDescription>
    </AttachmentContent>
    <AttachmentActions>
      <AttachmentAction aria-label="移除产品规划.pdf">
        <X />
      </AttachmentAction>
    </AttachmentActions>
  </Attachment>
</template>

图片

图片媒体使用 image 变体与竖向布局。

明亮的共享工作区
工作区参考图.jpgJPG · 1.1 MB
<script setup lang="ts">
  import { ExternalLink } from '@lucide/vue'
  import {
    Attachment,
    AttachmentAction,
    AttachmentActions,
    AttachmentContent,
    AttachmentDescription,
    AttachmentMedia,
    AttachmentTitle,
    AttachmentTrigger
  } from 'moriui'
</script>

<template>
  <Attachment class="w-full max-w-sm" orientation="vertical">
    <AttachmentMedia variant="image">
      <img src="https://images.unsplash.com/photo-1497366754035-f200968a6e72?w=900&auto=format&fit=crop&q=80" alt="明亮的共享工作区">
    </AttachmentMedia>
    <AttachmentContent>
      <AttachmentTitle>工作区参考图.jpg</AttachmentTitle>
      <AttachmentDescription>JPG · 1.1 MB</AttachmentDescription>
    </AttachmentContent>
    <AttachmentActions>
      <AttachmentAction aria-label="在新窗口打开工作区参考图">
        <ExternalLink />
      </AttachmentAction>
    </AttachmentActions>
    <AttachmentTrigger as="a" href="#" aria-label="预览工作区参考图" />
  </Attachment>
</template>

上传状态

用明确文字和图标表达上传生命周期。

待上传.pdf等待上传
设计系统.zip上传中 · 64%
财务模型.xlsx上传失败，请重试。
调研报告.pdf已上传 · 1.8 MB
<script setup lang="ts">
  import { Check, Clock, FileWarning, LoaderCircle } from '@lucide/vue'
  import { Attachment, AttachmentContent, AttachmentDescription, AttachmentMedia, AttachmentTitle } from 'moriui'
</script>

<template>
  <div class="grid w-full max-w-sm gap-2">
    <Attachment state="idle">
      <AttachmentMedia><Clock /></AttachmentMedia><AttachmentContent><AttachmentTitle>待上传.pdf</AttachmentTitle><AttachmentDescription>等待上传</AttachmentDescription></AttachmentContent>
    </Attachment>
    <Attachment state="uploading">
      <AttachmentMedia><LoaderCircle class="animate-spin" /></AttachmentMedia><AttachmentContent><AttachmentTitle>设计系统.zip</AttachmentTitle><AttachmentDescription>上传中 · 64%</AttachmentDescription></AttachmentContent>
    </Attachment>
    <Attachment state="error">
      <AttachmentMedia><FileWarning /></AttachmentMedia><AttachmentContent><AttachmentTitle>财务模型.xlsx</AttachmentTitle><AttachmentDescription>上传失败，请重试。</AttachmentDescription></AttachmentContent>
    </Attachment>
    <Attachment state="done">
      <AttachmentMedia><Check /></AttachmentMedia><AttachmentContent><AttachmentTitle>调研报告.pdf</AttachmentTitle><AttachmentDescription>已上传 · 1.8 MB</AttachmentDescription></AttachmentContent>
    </Attachment>
  </div>
</template>

尺寸

default、sm 与 xs 适配不同信息密度。

默认附件PDF · 2.4 MB
小号附件PDF · 2.4 MB
超小附件
<script setup lang="ts">
  import { FileText } from '@lucide/vue'
  import { Attachment, AttachmentContent, AttachmentDescription, AttachmentMedia, AttachmentTitle } from 'moriui'
</script>

<template>
  <div class="grid w-full max-w-sm gap-3">
    <Attachment><AttachmentMedia><FileText /></AttachmentMedia><AttachmentContent><AttachmentTitle>默认附件</AttachmentTitle><AttachmentDescription>PDF · 2.4 MB</AttachmentDescription></AttachmentContent></Attachment>
    <Attachment size="sm">
      <AttachmentMedia><FileText /></AttachmentMedia><AttachmentContent><AttachmentTitle>小号附件</AttachmentTitle><AttachmentDescription>PDF · 2.4 MB</AttachmentDescription></AttachmentContent>
    </Attachment>
    <Attachment size="xs">
      <AttachmentMedia><FileText /></AttachmentMedia><AttachmentContent><AttachmentTitle>超小附件</AttachmentTitle></AttachmentContent>
    </Attachment>
  </div>
</template>

附件组

横向滚动并吸附多个附件。

需求简报.pdfPDF · 1.4 MB
客户列表.csvCSV · 18 KB
renderer.vueVue · 12 KB
<script setup lang="ts">
  import { FileCode, FileText, Table } from '@lucide/vue'
  import {
    Attachment,
    AttachmentContent,
    AttachmentDescription,
    AttachmentGroup,
    AttachmentMedia,
    AttachmentTitle
  } from 'moriui'

  const files = [
    { name: '需求简报.pdf', meta: 'PDF · 1.4 MB', icon: FileText },
    { name: '客户列表.csv', meta: 'CSV · 18 KB', icon: Table },
    { name: 'renderer.vue', meta: 'Vue · 12 KB', icon: FileCode }
  ]
</script>

<template>
  <AttachmentGroup class="w-full max-w-sm" aria-label="项目附件" tabindex="0">
    <Attachment v-for="file in files" :key="file.name" class="w-64">
      <AttachmentMedia><component :is="file.icon" /></AttachmentMedia>
      <AttachmentContent><AttachmentTitle>{{ file.name }}</AttachmentTitle><AttachmentDescription>{{ file.meta }}</AttachmentDescription></AttachmentContent>
    </Attachment>
  </AttachmentGroup>
</template>

整卡触发器

AttachmentTrigger 提供覆盖整卡的独立操作入口。

调研摘要.pdf点击附件打开预览
<script setup lang="ts">
  import { FileSearch } from '@lucide/vue'
  import {
    Attachment,
    AttachmentContent,
    AttachmentDescription,
    AttachmentMedia,
    AttachmentTitle,
    AttachmentTrigger
  } from 'moriui'
</script>

<template>
  <Attachment class="w-full max-w-sm">
    <AttachmentMedia><FileSearch /></AttachmentMedia>
    <AttachmentContent>
      <AttachmentTitle>调研摘要.pdf</AttachmentTitle>
      <AttachmentDescription>点击附件打开预览</AttachmentDescription>
    </AttachmentContent>
    <AttachmentTrigger aria-label="预览调研摘要.pdf" />
  </Attachment>
</template>

API

属性 类型 默认值 说明
Attachment state'idle' | 'uploading' | 'processing' | 'error' | 'done''done'上传生命周期与对应视觉状态。
Attachment size'default' | 'sm' | 'xs''default'附件密度尺寸。
Attachment orientation'horizontal' | 'vertical''horizontal'媒体与内容的排列方向。
AttachmentMedia variant'icon' | 'image''icon'图标或图片媒体样式。
AttachmentAction variant / sizeButtonVariants'ghost' / 'icon-xs'基于 MoriUI Button 的附件操作样式。
AttachmentTrigger as / asChildstring | Component / boolean'button' / false整卡触发器的语义元素组合能力。
classHTMLAttributes["class"]undefined各可见槽位均合并调用方类。

无障碍说明

附件标题与说明应包含可理解的文件名、类型、大小和失败原因。仅图标 AttachmentAction 与无文本 AttachmentTrigger 必须提供 aria-label；可滚动的纯展示 AttachmentGroup 应提供可访问名称与键盘滚动入口。

关联组件

这个组件暂时没有登记关联条目。