三、核心组件详解
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>
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 常用主题变量
来源：
https://bncne.cn/xiangjicanshu.html
