docs(agents): add design references
This commit is contained in:
@@ -0,0 +1,45 @@
|
||||
---
|
||||
name: arco-vue-config-provider-overview
|
||||
description: "Arco Design Vue ConfigProvider 和全局配置指南。用于 `<a-config-provider>`、语言、组件前缀、尺寸、弹出容器、层级、滚动更新和应用级配置。"
|
||||
user-invocable: false
|
||||
---
|
||||
|
||||
# ConfigProvider 与全局配置
|
||||
|
||||
插件级全局设置使用 `app.use(ArcoVue, options)`;渲染树范围内的配置使用 `<a-config-provider>`。
|
||||
|
||||
## 插件配置
|
||||
|
||||
```ts
|
||||
import { createApp } from 'vue';
|
||||
import ArcoVue from '@arco-design/web-vue';
|
||||
import '@arco-design/web-vue/dist/arco.css';
|
||||
|
||||
const app = createApp(App);
|
||||
app.use(ArcoVue, {
|
||||
componentPrefix: 'a',
|
||||
});
|
||||
```
|
||||
|
||||
默认组件前缀是 `a`,对应 `<a-button>`、`<a-table>` 等标签。
|
||||
|
||||
## 语言配置
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<a-config-provider :locale="enUS">
|
||||
<a-pagination :total="50" show-total show-jumper show-page-size />
|
||||
</a-config-provider>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import enUS from '@arco-design/web-vue/es/locale/lang/en-us';
|
||||
</script>
|
||||
```
|
||||
|
||||
## 使用建议
|
||||
|
||||
- 如果配置影响整个应用,把 `<a-config-provider>` 放在应用根部附近。
|
||||
- 如果只有某个页面或模块需要特殊语言或配置,只包裹对应子树。
|
||||
- 弹出层容器优先查看具体组件的 popup container 相关属性,不要先写全局绕过逻辑。
|
||||
- 全局组件前缀保持一致,避免在同一项目中混用 `<a-*>` 和自定义前缀。
|
||||
Reference in New Issue
Block a user