Skip to content

参考

基于 Arco Design Vue 2.x(v2.58+)。本页是速查工具——包含 60+ 组件列表、常用 props 表、Modal / Message / Notification 静态 API 签名、TypeScript 类型、主题对象结构、13+ 语言包、700+ Arco Icons 分类。

速查

  • 组件命名<AButton>(PascalCase) / <a-button>(kebab-case)—— 二者等价
  • 静态 APIModal / Message / Notification 是全局静态方法(无需 Provider
  • 核心 TS 类型FormInstance / FieldRule / TableColumnData / TableData / MessageReturn / NotificationReturn / ModalReturn / MenuOption
  • 主题模式:CSS Variables(--color-primary-6) / Less 变量(@arcoblue-6) / Design Lab(在线 GUI)
  • 必装包@arco-design/web-vue(含 700+ Arco Icons)
  • 按需引入unplugin-vue-components + ArcoResolver({ sideEffect: true }) / unplugin-auto-import + ArcoResolver({ resolveIcons: true })
  • CSS 路径@arco-design/web-vue/dist/arco.css(全量)
  • icon 路径@arco-design/web-vue/es/icon
  • locale 路径@arco-design/web-vue/es/locale/lang/zh-cn
  • 暗色document.body.setAttribute('arco-theme', 'dark')

60+ 组件分类速查

General(通用,4)

组件标签常用 props
ButtonAButtontype(primary / outline / dashed / text / default) / size(mini / small / medium / large) / status(normal / success / warning / danger) / shape(square / round / circle) / long / loading / disabled / html-type(button / submit / reset)
ButtonGroupAButtonGrouptype / size / status / shape / direction(horizontal / vertical)
IconAIcon + 700+ 子组件size / spin / rotate / color
TypographyATypography / ATypographyParagraph / ATypographyTitle / ATypographyTextheading(1-6) / bold / mark / underline / delete / code / type(primary / secondary / success / warning / danger)
LinkALinkhref / status(normal / success / warning / danger) / hoverable / disabled

Layout(布局,4)

组件标签常用 props
GridARow / AColgutter(number / array) / justify / align / wrap / span(1-24) / offset / push / pull / flex / xs / sm / md / lg / xl / xxl
Grid(v2.15+)AGrid / AGridItemcols / row-gap / col-gap / collapsed / collapsed-rows
LayoutALayout / ALayoutHeader / ALayoutContent / ALayoutSider / ALayoutFooterwidth / collapsed / collapsible / breakpoint / theme(light / dark) / hide-trigger / reverse-arrow
SpaceASpacedirection(vertical / horizontal) / size(mini / small / medium / large / number / array) / align / wrap / fill
DividerADividertype(horizontal / vertical) / orientation(left / center / right) / direction
组件标签常用 props
MenuAMenu / AMenuItem / ASubMenu / AMenuItemGroupmode(horizontal / vertical / pop / popButton) / theme(light / dark) / accordion / collapsed / collapsed-width / breakpoint / selected-keys / open-keys
BreadcrumbABreadcrumb / ABreadcrumbItemseparator / max-count / routes
TabsATabs / ATabPaneactive-key / type(line / card / capsule / rounded) / position(top / bottom / left / right) / size / editable / lazy-load / destroy-on-hide
DropdownADropdown / ADropdownButton / ADoption / ADgrouptrigger(hover / click / contextMenu / focus) / position / disabled / popup-visible
PaginationAPaginationtotal / current / page-size / page-size-options / show-total / show-jumper / show-page-size / simple / size(mini / small / medium / large)
StepsASteps / AStepcurrent / status(process / finish / error / wait) / direction(horizontal / vertical) / size(mini / small / default) / type(default / arrow / dot / navigation) / label-placement
AnchorAAnchor / AAnchorLinkaffix / offset-top / offset-bottom / bound-distance / target-offset / scroll-container
BackTopABackToptarget-container / visible-height / easing / duration

Data Entry(数据输入,17)

组件标签常用 props
FormAForm / AFormItemmodel(必需) / rules / layout(horizontal / vertical / inline) / label-col-props / wrapper-col-props / label-align / disabled / scroll-to-first-error
FormItemAFormItemfield / label / rules / required / validate-trigger(change / input / blur / focus) / tooltip / extra / help / hide-label
InputAInput / AInputSearch / AInputPassword / AInputGroup / AInputTagmodel-value / placeholder / allow-clear / disabled / error / size / max-length / show-word-limit / prefix / suffix
InputNumberAInputNumbermodel-value / mode(embed / button) / min / max / step / precision / formatter / parser / hide-button
TextareaATextareamodel-value / placeholder / auto-size(boolean / { minRows, maxRows }) / max-length / show-word-limit
AutoCompleteAAutoCompletemodel-value / data / filter-option / strict / placeholder / disabled / loading
SelectASelect / AOption / AOptgroupmodel-value / options / multiple / allow-clear / allow-search / allow-create / max-tag-count / disabled / loading
TreeSelectATreeSelectmodel-value / data / multiple / tree-checkable / tree-check-strictly / field-names
CascaderACascadermodel-value / options / multiple / check-strictly / expand-trigger(click / hover) / path-mode
CheckboxACheckbox / ACheckboxGroupmodel-value / value / indeterminate / disabled / default-checked
RadioARadio / ARadioGroupmodel-value / type(radio / button) / direction(horizontal / vertical) / options / disabled
SwitchASwitchmodel-value / size / type(circle / round / line) / disabled / loading
SliderASlidermodel-value / min / max / step / range / marks / direction(horizontal / vertical) / show-tooltip
RateARatemodel-value / count(默认 5) / allow-half / allow-clear / read-only / color
DatePickerADatePicker / AMonthPicker / AYearPicker / AQuarterPicker / AWeekPicker / ARangePickermodel-value / value-format(YYYY-MM-DD / timestamp / Date) / disabled-date / show-time / placeholder
TimePickerATimePickermodel-value / format / disabled-hours / disabled-minutes / disabled-seconds / hide-disabled-options
ColorPicker(v2.40+)AColorPickermodel-value / format(hex / rgb / hsl / hsv) / disabled-alpha / history-colors / preset-colors
UploadAUploadaction / data / headers / accept / multiple / directory / draggable / auto-upload / limit / disabled / list-type(text / picture / picture-card)
TransferATransferdata / model-value / default-value / show-search / disabled / simple / one-way
MentionAMentionmodel-value / data / prefix / split / type(input / textarea)
VerificationCode(v2.40+)AVerificationCodemodel-value / length / mode(normal / separate) / mask / placeholder

Data Display(数据展示,17)

组件标签常用 props
TableATable / ATableColumncolumns(必需) / data / pagination / row-key / row-selection / expandable / children-key / virtual-list-props / bordered / loading / scroll / summary
TreeATreedata / multiple / checkable / selectable / field-names / default-expand-all / virtual-list-props / block-node / draggable
ListAList / AListItemdata / data-source / grid-props / bordered / hoverable / split / size / pagination-props
CardACardtitle / bordered / hoverable / size / loading / style
CarouselACarousel / ACarouselItemdefault-current / auto-play / move-speed / animation-name(slide / card / fade) / trigger(hover / click) / direction / show-arrow
CollapseACollapse / ACollapseItemactive-key / accordion / bordered / expand-icon-position(left / right) / destroy-on-hide
CalendarACalendarmodel-value / mode(month / year) / default-date / panel-width / panel-height
AvatarAAvatar / AAvatarGroupshape(circle / square) / size / image-url / auto-fix-font-size / trigger-type(mask / button)
BadgeABadgecount / max-count / text / dot / dot-style / color / offset
CommentACommentauthor / avatar / datetime / align(left / right / { datetime: 'right' }
DescriptionsADescriptions / ADescriptionsItemdata / column / title / bordered / align(left / center / right) / layout(horizontal / inline-horizontal / vertical) / size(mini / small / medium / large)
EmptyAEmptydescription / image-size
ImageAImage / AImagePreview / AImagePreviewGroupsrc / alt / width / height / fit / preview / preview-props / show-loader
StatisticAStatistictitle / value / value-from(0 / 数字) / precision / prefix / suffix / start / animation
TagATagcolor / size(small / medium / large) / closable / bordered / checkable / checked / loading / visible
TimelineATimeline / ATimelineItemreverse / direction(horizontal / vertical) / mode(left / right / alternate / top / bottom) / pending
TooltipATooltipcontent / position / popup-visible / mini / background-color / content-class / content-style
PopoverAPopovertitle / content / position / trigger / popup-visible
PopconfirmAPopconfirmcontent / position / type(info / success / warning / error) / ok-text / cancel-text / ok-button-props
WatermarkAWatermarkcontent / gap / offset / image / font / rotate / width / height

Feedback(反馈,11)

组件标签 / API常用 props
AlertAAlerttype(info / success / warning / error / normal) / title / show-icon / closable / banner / center
ModalAModalvisible / title / width / mask-closable / closable / mask / simple / fullscreen / align-center / body-class / ok-text / cancel-text / ok-loading / ok-button-props / cancel-button-props / unmount-on-close
Modal MethodsModal.confirm / info / success / warning / error / opentitle / content / okText / cancelText / onOk / onCancel / okButtonProps / cancelButtonProps / maskClosable / width / simple / escToClose
DrawerADrawervisible / title / width / height / placement(right / left / top / bottom) / mask-closable / mask / closable / header / footer / ok-text / cancel-text / unmount-on-close
MessageMessage.success / error / warning / info / loadingcontent / type / duration / closable / position / id / onClose / icon / showIcon
NotificationNotification.info / success / warning / errortitle / content / position(topLeft / topRight / bottomLeft / bottomRight) / duration / closable / icon / style / class / footer
SpinASpinloading / tip / dot / size(number) / delay / block
ProgressAProgresstype(line / circle / steps) / percent(0-1) / size / width / color / track-color / status(normal / success / warning / danger) / show-text / format-text
ResultAResultstatus(info / success / warning / error / 403 / 404 / 500 / null) / title / subtitle / extra
SkeletonASkeleton / ASkeletonLine / ASkeletonShapeloading / animation
NoticeANoticetype(info / success / warning / error) / title / content

Other(其他,4)

组件标签常用 props
ConfigProviderAConfigProviderlocale / size / prefix-cls / global / update-at-scroll
AffixAAffixoffset-top / offset-bottom / target / target-offset
ResizeObserverAResizeObserver(插槽组件,监听内部元素尺寸变化)
TriggerATriggerpopup-visible / trigger(click / hover / focus / contextMenu) / position / mouse-enter-delay / mouse-leave-delay

ConfigProvider 完整选项

vue
<template>
  <a-config-provider
    :locale="zhCN"
    :size="size"
    :prefix-cls="prefixCls"
    :global="global"
    :update-at-scroll="updateAtScroll"
  >
    <router-view />
  </a-config-provider>
</template>
Prop类型默认值说明
localeobject-语言包(@arco-design/web-vue/es/locale/lang/*
size'mini' / 'small' / 'medium' / 'large''medium'全局组件尺寸
prefix-clsstring'arco'CSS class 前缀(隔离多个 Arco 实例)
globalbooleanfalse全局生效(不仅子组件)
update-at-scrollbooleanfalse滚动时更新 Tooltip / Popover 位置
ts
import { Modal } from '@arco-design/web-vue'

// 方法签名
Modal.info(config: ModalConfig): { close: () => void }
Modal.success(config: ModalConfig): { close: () => void }
Modal.warning(config: ModalConfig): { close: () => void }
Modal.error(config: ModalConfig): { close: () => void }
Modal.confirm(config: ModalConfig): { close: () => void }
Modal.open(config: ModalConfig): { close: () => void }
Modal.destroyAll(): void

ModalConfig 选项

选项类型默认说明
titlestring / RenderFunction-标题
contentstring / RenderFunction-内容(支持 h 函数自定义)
okTextstring'确定'OK 按钮文字
cancelTextstring'取消'Cancel 按钮文字
okButtonPropsobject-OK 按钮 props(status / type 等)
cancelButtonPropsobject-Cancel 按钮 props
hideCancelbooleanfalse隐藏 Cancel 按钮(info / success / warning / error 默认 true)
maskClosablebooleantrue点遮罩是否关闭
escToClosebooleantrueESC 是否关闭
maskbooleantrue是否显示遮罩
simplebooleanfalse简洁模式
widthnumber / string520宽度
topnumber / string100距顶部距离
alignCenterbooleanfalse垂直居中
bodyClass / bodyStylestring / CSSObject-body 样式
onOk() => Promise / boolean / void-OK 回调(返回 false 阻止关闭)
onCancel() => void-Cancel 回调
onBeforeOk() => Promise / boolean-Ok 前置钩子

Message 静态 API 完整签名

ts
import { Message } from '@arco-design/web-vue'

Message.success(config: string | MessageConfig): MessageReturn
Message.error(config: string | MessageConfig): MessageReturn
Message.warning(config: string | MessageConfig): MessageReturn
Message.info(config: string | MessageConfig): MessageReturn
Message.loading(config: string | MessageConfig): MessageReturn
Message.clear(position?: 'top' | 'bottom'): void

interface MessageReturn {
  close: () => void
}

MessageConfig 选项

选项类型默认说明
contentstring / RenderFunction-内容
durationnumber3000持续时间(ms,0 表示不自动关闭)
closablebooleanfalse是否可关闭
position'top' / 'bottom''top'位置
idstring-唯一 id(防重复 + 更新)
iconRenderFunction-自定义图标
showIconbooleantrue是否显示图标
resetOnHoverbooleanfalse鼠标悬停时重置计时
onClose() => void-关闭回调

Notification 静态 API 完整签名

ts
import { Notification } from '@arco-design/web-vue'

Notification.info(config: string | NotificationConfig): NotificationReturn
Notification.success(config: string | NotificationConfig): NotificationReturn
Notification.warning(config: string | NotificationConfig): NotificationReturn
Notification.error(config: string | NotificationConfig): NotificationReturn
Notification.remove(id: string): void
Notification.clear(position?: NotificationPosition): void

interface NotificationReturn {
  close: () => void
}

NotificationConfig 选项

选项类型默认说明
contentRenderContent-主要内容(必填)
titleRenderContent-标题
position'topLeft' / 'topRight' / 'bottomLeft' / 'bottomRight''topRight'位置
durationnumber4500持续时间(ms)
closablebooleanfalse是否可关闭
showIconbooleantrue是否显示图标
iconRenderFunction-自定义图标
idstring-唯一 id
style / classCSSProperties / string-样式
footerRenderFunction(v2.25+)-自定义底部
closeIconRenderFunction-关闭图标
onClose(id) => void-关闭回调

TypeScript 核心类型

ts
// 表单
import type { FormInstance, FieldRule } from '@arco-design/web-vue/es/form'

const formRef = ref<FormInstance | null>(null)

const rules: Record<string, FieldRule[]> = {
  username: [
    { required: true, message: 'Username is required' },
    { minLength: 3, maxLength: 20 },
  ],
}

// 表格
import type { TableColumnData, TableData, TableRowSelection } from '@arco-design/web-vue/es/table/interface'

const columns: TableColumnData[] = [
  { title: 'Name', dataIndex: 'name', width: 140 },
]

interface User extends TableData {
  key: string
  name: string
  email: string
}

const data: User[] = [/* ... */]

// 菜单
import type { MenuOption } from '@arco-design/web-vue/es/menu/interface'

const menuOptions: MenuOption[] = [
  { key: '1', label: '菜单 1' },
]

FormInstance 方法签名

ts
interface FormInstance {
  validate: (cb?: (errors: any) => void) => Promise<any>
  validateField: (field: string | string[], cb?: (errors: any) => void) => Promise<any>
  resetFields: (field?: string | string[]) => void
  clearValidate: (field?: string | string[]) => void
  setFields: (fields: Record<string, { value?: any; status?: 'success' | 'warning' | 'error'; message?: string }>) => void
  scrollToField: (field: string) => void
}

FieldRule 完整字段

ts
interface FieldRule {
  type?: 'string' | 'number' | 'boolean' | 'array' | 'object' | 'email' | 'url' | 'ip'
  required?: boolean
  message?: string
  // 字符串 / 数组
  length?: number
  minLength?: number
  maxLength?: number
  // 字符串
  match?: RegExp
  uppercase?: boolean
  lowercase?: boolean
  // 数字
  min?: number
  max?: number
  equal?: number
  positive?: boolean
  negative?: boolean
  // 布尔
  true?: boolean
  false?: boolean
  // 数组
  includes?: any[]
  deepEqual?: any
  // 对象
  empty?: boolean
  hasKeys?: string[]
  // 自定义
  validator?: (value: any, callback: (error?: string) => void) => void | Promise<void>
}

TableColumnData 完整字段

ts
interface TableColumnData {
  title?: string | RenderFunction
  dataIndex?: string
  width?: number | string
  align?: 'left' | 'center' | 'right'
  fixed?: 'left' | 'right'
  ellipsis?: boolean
  tooltip?: boolean | TooltipProps
  sortable?: {
    sortDirections?: ('ascend' | 'descend')[]
    sorter?: boolean | ((a: T, b: T) => number)
    sortOrder?: 'ascend' | 'descend' | ''
    defaultSortOrder?: 'ascend' | 'descend' | ''
  }
  filterable?: {
    filters: { text: string; value: string }[]
    filter: (value: any, record: T) => boolean
    multiple?: boolean
    filteredValue?: string[]
    defaultFilteredValue?: string[]
    icon?: RenderFunction
  }
  render?: (data: { record: T; column: TableColumnData; rowIndex: number }) => VNode
  slotName?: string
  cellClass?: string | string[] | ((record: T, columnIndex: number) => string | string[])
  cellStyle?: CSSProperties | ((record: T, columnIndex: number) => CSSProperties)
  children?: TableColumnData[]
}

主题对象速查

Less 变量核心列表

less
// 主色
@arcoblue-1 through @arcoblue-10   // 主色 10 个色阶(默认 #165dff @ -6)

// 状态色
@green-1 through @green-10         // 成功(默认 #00b42a @ -6)
@orange-1 through @orange-10       // 警告(默认 #ff7d00 @ -6)
@red-1 through @red-10             // 危险(默认 #f53f3f @ -6)
@gold-1 through @gold-10           // 金色
@purple-1 through @purple-10       // 紫色

// 中性色
@gray-1 through @gray-10           // 灰色
@black                             // 纯黑
@white                             // 纯白

// 文字
@color-text-1 through @color-text-4

// 背景
@color-bg-1 through @color-bg-5

// 边框
@color-border-1 through @color-border-4

// 填充
@color-fill-1 through @color-fill-4

// 间距 / 圆角
@border-radius-small               // 2px
@border-radius-medium              // 4px
@border-radius-large               // 8px
@border-radius-circle              // 50%

@spacing-1 through @spacing-12     // 间距

CSS Variables 核心列表

css
:root {
  /* 主色 10 阶 */
  --color-primary-1 through --color-primary-10
  --color-primary-light-1 through --color-primary-light-4

  /* 状态色 */
  --color-success-light-1 through --color-success-light-4
  --color-warning-light-1 through --color-warning-light-4
  --color-danger-light-1 through --color-danger-light-4

  /* 文字 */
  --color-text-1   /* #1d2129 */
  --color-text-2   /* #4e5969 */
  --color-text-3   /* #86909c */
  --color-text-4   /* #c9cdd4 */

  /* 背景 */
  --color-bg-1     /* #ffffff */
  --color-bg-2     /* #ffffff */
  --color-bg-3     /* #ffffff */
  --color-bg-4     /* #ffffff */
  --color-bg-5     /* #ffffff */
  --color-bg-white /* #ffffff */
  --color-bg-popup /* #ffffff */

  /* 边框 */
  --color-border-1 /* #f2f3f5 */
  --color-border-2 /* #e5e6eb */
  --color-border-3 /* #c9cdd4 */
  --color-border-4 /* #86909c */

  /* 填充 */
  --color-fill-1 through --color-fill-4

  /* 中性 */
  --color-neutral-1 through --color-neutral-10
}

/* 暗色覆盖 */
body[arco-theme='dark'] {
  --color-bg-1: #17171a
  --color-text-1: #f7f8fa
  /* ... 全部反转 */
}

完整 token 列表arco-design-vue/tokens.less(数百个 Less 变量)+ arco-design-vue/css-variables(对应 CSS Variables)。

13 种语言包

语言locale Key引入路径
简体中文zh-CN@arco-design/web-vue/es/locale/lang/zh-cn
英文en-US@arco-design/web-vue/es/locale/lang/en-us
日文ja-JP@arco-design/web-vue/es/locale/lang/ja-jp
韩文ko-KR@arco-design/web-vue/es/locale/lang/ko-kr
西班牙文es-ES@arco-design/web-vue/es/locale/lang/es-es
法文fr-FR@arco-design/web-vue/es/locale/lang/fr-fr
德文de-DE@arco-design/web-vue/es/locale/lang/de-de
意大利文it-IT@arco-design/web-vue/es/locale/lang/it-it
印尼文id-ID@arco-design/web-vue/es/locale/lang/id-id
葡萄牙文pt-PT@arco-design/web-vue/es/locale/lang/pt-pt
泰文th-TH@arco-design/web-vue/es/locale/lang/th-th
越南文vi-VN@arco-design/web-vue/es/locale/lang/vi-vn
荷兰文nl-NL@arco-design/web-vue/es/locale/lang/nl-nl

700+ Arco Icons 分类

完整图标列表见 arco.design/vue/component/icon。常用图标速查:

方向 / 箭头

IconUp / IconDown / IconLeft / IconRight / IconArrowUp / IconArrowDown / IconArrowLeft / IconArrowRight / IconDoubleLeft / IconDoubleRight / IconCaretUp / IconCaretDown / IconCaretLeft / IconCaretRight

操作

IconPlus / IconMinus / IconClose / IconCheck / IconEdit / IconDelete / IconSave / IconCopy / IconExport / IconImport / IconRefresh / IconSync / IconUpload / IconDownload / IconSwap

文件

IconFile / IconFolder / IconFolderAdd / IconFolderDelete / IconAttachment / IconImage / IconImageClose / IconVideoCamera / IconStorage / IconArchive

用户 / 权限

IconUser / IconUserAdd / IconUserGroup / IconRobot / IconLock / IconUnlock / IconShield / IconShieldCheck / IconIdcard / IconLockHidden

导航 / 菜单

IconHome / IconMenu / IconMenuFold / IconMenuUnfold / IconList / IconApps / IconDashboard / IconNav

状态反馈

IconCheckCircleFill / IconCloseCircleFill / IconExclamationCircleFill / IconInfoCircleFill / IconQuestionCircleFill / IconMinusCircleFill / IconStop / IconBug / IconLoading

装饰

IconStar / IconStarFill / IconHeart / IconHeartFill / IconLike / IconLikeFill / IconBookmark / IconShareAlt / IconShareInternal / IconScissor / IconBranch / IconCommand / IconGift

设置

IconSettings / IconTool / IconControl / IconCalendar / IconClockCircle / IconHistory / IconCalendarClock / IconNotification / IconNotificationClose / IconMessage / IconEmail

图表 / 数据

IconBarChart / IconLineChart / IconPieChart / IconStorage / IconLayout / IconTriangleUp / IconTriangleDown / IconCompass

媒体 / 形状

IconPlayCircle / IconPauseCircle / IconRecord / IconBgColors / IconHighlight / IconLink / IconUnorderedList / IconOrderedList

按需引入 icon

ArcoResolver({ resolveIcons: true }) 配置后——模板写 <icon-plus /> 插件自动 import:

ts
// 构建时插件自动生成:
import { IconPlus } from '@arco-design/web-vue/es/icon'

或手动 import:

ts
import {
  IconPlus,
  IconDelete,
  IconEdit,
  IconSettings,
  IconUser,
} from '@arco-design/web-vue/es/icon'

常用 npm 包速查

包名用途版本
@arco-design/web-vue主组件库(含 700+ Arco Icons)2.58+
unplugin-vue-components按需引入组件(生产推荐)^0.27
unplugin-auto-import按需引入 API + 图标^0.18
lessLess 主题深度定制^4.x
@arco-themes/web-mythemeDesign Lab 生成的主题包视主题而定
@arco-design/colorArco 调色板工具(10 色阶生成)^0.4

相关链接