AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

前端组件库——Arco Design Vue知识点大全（二）

2026-04-15 448
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 教程来源 https://bncne.cn/sheyinggoutu.html Arco Design Vue提供丰富UI组件（按钮、栅格、表单、表格、反馈）及强大主题定制能力：支持Less编译时覆盖（如`arcoblue-6`主色生成10阶色板）与CSS变量运行时动态换肤，兼顾开发效率与用户体验。

三、核心组件详解

3.1 按钮组件 Button
按钮是用户交互中最基础的组件，Arco Design Vue提供了丰富的按钮样式和状态。

<template>
  <div>
    <!-- 按钮类型 -->
    <a-space>
      <a-button>默认按钮</a-button>
      <a-button type="primary">主要按钮</a-button>
      <a-button type="secondary">次要按钮</a-button>
      <a-button type="dashed">虚线按钮</a-button>
      <a-button type="text">文本按钮</a-button>
      <a-button type="outline">线框按钮</a-button>
    </a-space>

    <!-- 按钮状态 -->
    <a-space>
      <a-button status="danger">危险按钮</a-button>
      <a-button status="warning">警告按钮</a-button>
      <a-button status="success">成功按钮</a-button>
      <a-button disabled>禁用按钮</a-button>
      <a-button loading>加载中</a-button>
    </a-space>

    <!-- 按钮尺寸 -->
    <a-space>
      <a-button size="mini">迷你按钮</a-button>
      <a-button size="small">小型按钮</a-button>
      <a-button>默认按钮</a-button>
      <a-button size="large">大型按钮</a-button>
    </a-space>

    <!-- 长按钮（宽度100%） -->
    <a-button long type="primary">长按钮</a-button>

    <!-- 圆形按钮（用于图标） -->
    <a-button shape="circle" type="primary">
      <template #icon><icon-search /></template>
    </a-button>
  </div>
</template>

<script setup>
import { IconSearch } from '@arco-design/web-vue/es/icon'
</script>

按钮类型说明：Arco Design Vue提供了6种按钮类型。其中primary用于主要操作，secondary用于次要操作，dashed用于虚线边框的辅助操作，text用于轻量化操作，outline用于线框风格的辅助操作。status属性用于表示操作结果状态（成功/警告/危险）。

3.2 栅格系统 Grid
Arco Design Vue的栅格系统基于24列设计，通过Row和Col组件组合实现响应式布局。

<template>
  <!-- 基础栅格 -->
  <a-row :gutter="16">
    <a-col :span="12">
      <div class="grid-content">占12列</div>
    </a-col>
    <a-col :span="12">
      <div class="grid-content">占12列</div>
    </a-col>
  </a-row>

  <!-- 响应式栅格 -->
  <a-row :gutter="[16, 24]">
    <a-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
      <div class="grid-content">响应式内容</div>
    </a-col>
    <a-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
      <div class="grid-content">响应式内容</div>
    </a-col>
    <a-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
      <div class="grid-content">响应式内容</div>
    </a-col>
  </a-row>

  <!-- 列偏移 -->
  <a-row>
    <a-col :span="6" :offset="6">
      <div class="grid-content">偏移6列</div>
    </a-col>
  </a-row>

  <!-- 列排序 -->
  <a-row>
    <a-col :span="18" :push="6">
      <div class="grid-content">右侧内容</div>
    </a-col>
    <a-col :span="6" :pull="18">
      <div class="grid-content">左侧内容</div>
    </a-col>
  </a-row>
</a-row>

image.png
3.3 表单组件 Form
表单是企业级应用中最常用的组件之一，Arco Design Vue提供了完整的表单解决方案。

<template>
  <a-form
    ref="formRef"
    :model="formData"
    :rules="rules"
    layout="vertical"
    size="large"
  >
    <a-form-item field="username" label="用户名" required>
      <a-input
        v-model="formData.username"
        placeholder="请输入用户名"
        allow-clear
      />
    </a-form-item>

    <a-form-item field="email" label="邮箱" required>
      <a-input
        v-model="formData.email"
        placeholder="请输入邮箱"
        allow-clear
      />
    </a-form-item>

    <a-form-item field="role" label="角色" required>
      <a-select
        v-model="formData.role"
        placeholder="请选择角色"
        allow-clear
      >
        <a-option value="admin">管理员</a-option>
        <a-option value="user">普通用户</a-option>
      </a-select>
    </a-form-item>

    <a-form-item field="status" label="状态">
      <a-switch v-model="formData.status" />
    </a-form-item>

    <a-form-item>
      <a-space>
        <a-button type="primary" html-type="submit">提交</a-button>
        <a-button @click="handleReset">重置</a-button>
      </a-space>
    </a-form-item>
  </a-form>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { Message } from '@arco-design/web-vue'

const formRef = ref()

const formData = reactive({
  username: '',
  email: '',
  role: '',
  status: false
})

// 表单验证规则
const rules = {
  username: [
    { required: true, message: '请输入用户名' },
    { minLength: 3, maxLength: 20, message: '长度在3-20个字符' }
  ],
  email: [
    { required: true, message: '请输入邮箱' },
    { type: 'email', message: '请输入正确的邮箱格式' }
  ],
  role: [
    { required: true, message: '请选择角色' }
  ]
}

const handleReset = () => {
  formRef.value.resetFields()
}

const handleSubmit = () => {
  formRef.value.validate().then(() => {
    Message.success('提交成功')
  }).catch(() => {
    Message.error('请正确填写表单')
  })
}
</script>

3.4 数据表格组件 Table
表格是中后台系统中最复杂的组件之一，Arco Design Vue的Table组件功能强大。

<template>
  <a-table
    :columns="columns"
    :data="tableData"
    :pagination="pagination"
    :loading="loading"
    row-key="id"
    stripe
    border
    :row-selection="rowSelection"
    @page-change="handlePageChange"
    @page-size-change="handlePageSizeChange"
  >
    <!-- 自定义列内容 -->
    <template #status="{ record }">
      <a-tag :color="record.status === 1 ? 'green' : 'red'">
        {
  { record.status === 1 ? '启用' : '禁用' }}
      </a-tag>
    </template>

    <template #operations="{ record }">
      <a-space>
        <a-button type="text" size="small" @click="handleEdit(record)">编辑</a-button>
        <a-button type="text" status="danger" size="small" @click="handleDelete(record)">删除</a-button>
      </a-space>
    </template>
  </a-table>
</template>

<script setup>
import { ref } from 'vue'
import { Message } from '@arco-design/web-vue'

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    width: 80,
    fixed: 'left'
  },
  {
    title: '姓名',
    dataIndex: 'name',
    width: 120,
    sortable: {
      sortDirections: ['ascend', 'descend']
    }
  },
  {
    title: '状态',
    dataIndex: 'status',
    width: 100,
    slotName: 'status'
  },
  {
    title: '操作',
    slotName: 'operations',
    width: 150,
    fixed: 'right'
  }
]

const tableData = ref([])
const loading = ref(false)
const pagination = ref({
  current: 1,
  pageSize: 20,
  total: 0,
  showTotal: true,
  showJumper: true,
  showPageSize: true
})
</script>

3.5 反馈组件
消息通知 Message

<script setup>
import { Message } from '@arco-design/web-vue'

// 基础消息
Message.info('这是一条信息')
Message.success('操作成功')
Message.warning('警告信息')
Message.error('操作失败')

// 带配置的消息
Message.success({
  content: '自定义消息',
  duration: 3000,
  closable: true
})
</script>

对话框 Modal

<template>
  <a-button @click="visible = true">打开对话框</a-button>

  <a-modal
    v-model:visible="visible"
    title="对话框标题"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <p>这是对话框的内容</p>
    <p>可以放置任意自定义内容</p>
  </a-modal>
</template>

<script setup>
import { ref } from 'vue'
import { Message } from '@arco-design/web-vue'

const visible = ref(false)

const handleOk = () => {
  Message.success('点击了确定')
  visible.value = false
}

const handleCancel = () => {
  Message.info('点击了取消')
}
</script>

抽屉 Drawer

<template>
  <a-button @click="drawerVisible = true">打开抽屉</a-button>

  <a-drawer
    v-model:visible="drawerVisible"
    title="抽屉标题"
    width="400"
    @ok="handleDrawerOk"
    @cancel="handleDrawerCancel"
  >
    <p>这是抽屉的内容</p>
    <p>抽屉适合放置需要较多空间的内容</p>
  </a-drawer>
</template>

四、主题定制

Arco Design Vue提供了强大的主题定制能力，支持两种主题定制方式：CSS变量覆盖和Less变量覆盖。

4.1 主题定制原理
Arco Design使用Palette色彩工具将6号色作为色板中的主色，分为10个梯度（arcoblue-1到arcoblue-10）。其中arcoblue-6是主色，定制的颜色会自动生成从1到10的完整色板。

// 定制主题时，修改arcoblue-6即可，其他梯度会自动生成
modifyVars: {
  'arcoblue-6': '#165DFF'  // 设置主色，自动生成1-10号色
}

4.2 通过Less变量定制（编译时）
步骤1：安装Less支持

npm install -D less

步骤2：配置Vite

// vite.config.ts
export default defineConfig({
  css: {
    preprocessorOptions: {
      less: {
        modifyVars: {
          'arcoblue-6': '#165DFF',      // 主题主色
          'border-radius-none': '0',
          'border-radius-small': '2px',
          'border-radius-medium': '4px',
          'border-radius-large': '8px',
          'border-radius-circle': '50%'
        },
        javascriptEnabled: true,         // 必须启用
        additionalData: '@import "@/styles/variables.less";'  // 可选：导入公共变量
      }
    }
  }
})

步骤3：引入Less源文件

// main.js
import { createApp } from 'vue'
import ArcoVue from '@arco-design/web-vue'
import '@arco-design/web-vue/dist/arco.less'  // 注意：引入.less文件而非.css

const app = createApp(App)
app.use(ArcoVue)
app.mount('#app')

4.3 通过CSS变量定制（运行时）
Arco Design Vue也支持通过CSS变量进行运行时主题切换，无需重新编译：

<template>
  <a-config-provider :theme="theme">
    <app />
  </a-config-provider>
</template>

<script setup>
import { reactive } from 'vue'

// 动态主题配置
const theme = reactive({
  token: {
    colorPrimary: '#7c3aed',      // 主题主色
    colorSuccess: '#10b981',       // 成功色
    colorWarning: '#f59e0b',       // 警告色
    colorError: '#ef4444',         // 错误色
    borderRadius: '8px',           // 圆角
    fontSize: '14px'               // 字体大小
  }
})

// 运行时动态修改主题色
const changeTheme = (color) => {
  theme.token.colorPrimary = color
}
</script>

CSS变量方式的特点：支持运行时动态切换，无需重新编译，适合需要支持多主题的场景。但需要注意，CSS变量的动态修改在低版本浏览器中可能存在兼容性问题。

4.4 常用主题变量
image.png
来源：
https://bncne.cn/xiangjicanshu.html

文章标签：
JavaScript
前端开发
UED
游客xp6ru7c63sdiu
目录
相关文章
一人公司傅心雨
|
3月前
|
BI
OPD型员工的三个真实工作场景
OPC中国实践案例库收录三大真实场景：内容运营、客户成功、项目交付，均通过OPD模式（智能体协同）实现提效——内容产出增4倍、客户服务量扩4倍、项目经理聚焦高价值决策。无需规模门槛，小团队可快速试点，配套可复用模板与“智能体效能负责人”培养体系。（239字）
一人公司傅心雨
186 5
9589
|
3月前
|
存储 缓存 Java
Java在配置中心（Apollo/Nacos）设计中的核心贡献
微服务架构下，配置文件分散在各处，修改一个配置需要重启服务，效率低下且易出错。配置中心实现了配置的统一管理、动态刷新、版本控制、灰度发布。
9589
347 2
萧涵GEO实验室
|
4月前
|
人工智能 搜索推荐 定位技术
GEO不是关键词优化：为什么品牌做AI搜索前，必须先搭建“问题链”？
萧涵GEO观点：GEO不是简单的关键词优化，而是围绕用户语义意图和AI回答逻辑展开的内容与信任资产建设。品牌做GEO前，必须先搭建问题链，明确用户会怎么问、AI会怎么答、品牌应该在哪些问题中被正确理解、合理推荐或客观防守
萧涵GEO实验室
423 4
云服务器吧
|
4月前
|
弹性计算 运维 虚拟化
云服务器ECS是什么？一张图看懂ECS介绍、组成、优势及使用场景全解析
云服务器ECS是阿里云提供的虚拟化计算服务，类比“租赁房屋”——服务商负责机房建设与运维，用户按需租用、灵活升降配、随时释放，免去自建硬件成本。一张图详解其架构、优势及适用场景。阿里云服务器ECS官网：https://t.aliyun.com/U/AZBUsA
云服务器吧
246 6
阿里云云原生
|
5月前
|
人工智能 测试技术 API
阿里云 MSE AI Registry 公测开启：给你的 AI 资产一个专属的注册中心
AI Registry 公测开启，一文了解产品能力、AgentLoop 集成与 Skill 规划。
阿里云云原生
673 56
游客f4qkvgoll7tps
|
5月前
|
JSON 安全 API
短剧出海译制：多语种内容管理与平台字幕规格适配方案
本文剖析短剧出海的技术瓶颈：多语种（8语种×5平台=40版本）带来的版本管理混乱、平台字幕规格差异（SRT/VTT/TTML、帧级精度、竖屏安全区等）及区域合规复杂性。提出五层架构方案，聚焦版本管控、智能字幕适配与自动化分发，助力团队突破“翻译产能高、分发效率低”的卡点。（239字）
游客f4qkvgoll7tps
553 4
迪迦AI智能体
|
3月前
|
人工智能
AI工作流实践：如何降低内容运营中的接力成本？
AI工作流不替代人决策，而是打通内容运营全链路断点：需求沉淀、资料检索、初稿生成、审核留痕、发布记录、数据复盘。通过结构化任务+知识库+智能体协同，将反复查找、转述、遗漏的“接力成本”大幅降低，让人专注事实判断与质量把关。（239字）
迪迦AI智能体
573 3
Alan_751
|
4月前
|
JSON 供应链 算法
SHEIN开放平台API集成实战：发货单查询全流程解析
本文以SHEIN开放平台发货单查询（`send_list_request`）为实战案例，详解签名生成、请求构建、异常处理与数据持久化全流程，助开发者将理论规范快速落地为稳定可用的业务集成方案。（239字）
Alan_751
460 5
安之眼Agent
|
4月前
|
人工智能 监控 算法
智慧工业园区 AI 视觉安防监管系统建设方案
本方案基于AI算法盒子+专属安全算法+高清监控，构建端边云协同的智慧园区监管系统，实现24小时实时监测、智能识别、自动告警与数据追溯，覆盖安全帽/安全带佩戴、跌倒、闯入、车辆等五大行为检测，助力园区从“事后处置”迈向“事前预防、事中预警”。
安之眼Agent
624 3
北京木奇移动技术
|
4月前
|
人工智能 监控 测试技术
AI智能体的开发流程
AI智能体开发需结构化推进：明确定义目标与角色，设计含规划、记忆、工具、模型的四大核心架构；借助LangChain/CrewAI等框架实现；通过基准测试与人工审核保障可靠性；最终部署并持续监控优化。初学者可从Coze等低代码平台入门。（239字）
北京木奇移动技术
559 4

热门文章

最新文章

  • 1
    成为MySQL DBA 博客系列-数据库升级
  • 2
    阿里云RPA（机器人流程自动化）干货系列之四：阿里云RPA产品架构
  • 3
    揭秘云栖大会VR直播云服务解决方案的技术亮点和核心能力
  • 4
    【入门指南】操作阿里云Kibana
  • 5
    阿里云linux服务器安装mysql并实现远程访问
  • 6
    rdc最佳实践之开发模式——git flow
  • 7
    Node内置模块 【压缩zlib模块】
  • 8
    ICA简介：独立成分分析
  • 9
    参加第三届信息化创新克拉玛依国际学术论坛
  • 10
    WinCE6.0的极速启动
  • 1
    Databricks 实测 Spark 比 Flink 快 92%，流计算要变天了。
    41
  • 2
    凸轮杠杆式夹紧工装设计拆解：调得快、夹得稳、换得勤
    33
  • 3
    阿里云轻量、ECS、GPU 云服务器报价汇总：按时长计费清单 + 业务匹配教程
    32
  • 4
    阿里云8核16G服务器价格手册：ECS经济型e、c9i、c9ae、u1等实例规格族按量和包年包月价格表
    27
  • 5
    阿里云服务器收费明细：年付、月付、小时计费价格梳理与计费模式解读
    26
  • 6
    阿里云 RDS 数据库运维实战手册：实例版本差异、连接代码、线上故障处理要点
    25
  • 7
    阿里云全栈算力深度解析：ECS、GPU 云服务器、轻量服务器与 AI 云产品配置价格实战测评
    30
  • 8
    阿里云8核16G服务器收费标准：按量1小时、1个月、一年、3年及5年价格查询
    32
  • 9
    Multi-DRM 接入实战：15 个开源集成项目选型对比与 Content ID 流程拆解
    29
  • 10
    语义、信源与上下文：GEO传播中的安全边界清单
    32

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    一条命令迁移，帮你实现 OpenClaw 与 Hermes Agent 记忆互通！