theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

♻️(document): 调整文档结构

Browse Source
This commit is contained in:
就眠儀式
2022-06-25 20:10:12 +08:00
parent d18425cb2a
commit b86b7d308c
166 changed files with 528 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
package/document-component/src/document/zh-CN/guide/changelog.md Normal file
View File

@@ -0,0 +1,162 @@
::: title 更新记录
:::
<lay-timeline style="padding-left:30px;padding-top:30px;">
<lay-timeline-item title="🐛 尾版本号：日常问题更新。" simple></lay-timeline-item>
<lay-timeline-item title="🌟 次版本号：带有新特性的向下兼容的版本。" simple></lay-timeline-item>
<lay-timeline-item title="♻️ 主版本号：含有破坏性更新和新特性，不在发布周期内。" simple></lay-timeline-item>
</lay-timeline>
::: demo
<template>
<lay-timeline>
<lay-timeline-item title="1.2.x">
<ul>
<a name="1-2-0"></a>
<li>
<h3>1.2.1 <span class="layui-badge-rim">2022-06-21</span></h3>
<ul>
<li>[新增] dropdown 组件 placement 属性, 设置下拉面板位置。</li>
<li>[新增] dropdown 组件 autoFitPosition 属性, 超出浏览器边界自动调整下拉面板位置, 默认为 true。</li>
<li>[新增] dropdown 组件 autoFitWidth 与 autoFitMinWidth 属性, 是否将下拉面板宽度与最小宽度设置为触发器宽度, 默认 false。</li>
<li>[新增] dropdown 组件 updateAtScroll 属性, 是否在容器滚动时更新下拉面板的位置,默认 false。</li>
<li>[新增] dropdown 组件 autoFixPosition 属性, 是否在触发器或下拉面板尺寸变化时更新下拉面板位置, 默认 true。</li>
<li>[新增] dropdown 组件 clickOutsideToClose 属性, 点击面板外部关闭下拉, 默认 true。</li>
<li>[新增] dropdown 组件 contentOffset 属性, 下拉面板距离触发器的偏移距离，默认 2。</li>
<li>[新增] progress 组件 circleSize 和 circleWidth 属性, 用于控制环形进度条尺寸与线条宽度。</li>
<li>[修复] progress 组件 circle 模式夜间主题不兼容的问题。</li>
<li>[新增] carousel 组件 过渡动画，默认为滑动。</li>
<li>[修复] carousel 组件 autoplay 属性为false时仍自动播放问题。</li>
<li>[修复] cascader 组件 按需加载无法正常引入使用。</li>
</ul>
</li>
</ul>
</lay-timeline-item>
<lay-timeline-item title="1.1.x">
<ul>
<a name="1-1-9"></a>
<li>
<h3>1.1.10 <span class="layui-badge-rim">2022-06-21</span></h3>
<ul>
<li>[修复] darkreader 依赖不存在的问题</li>
<li>[修复] cascader 组件的样式文件污染</li>
</ul>
</li>
</ul>
<ul>
<a name="1-1-9"></a>
<li>
<h3>1.1.9 <span class="layui-badge-rim">2022-06-21</span></h3>
<ul>
<li>[新增] progress 组件 circle 属性, 支持环形进度条</li>
<li>[新增] cascader 组件, 将数据按照指定的格式传入后分层分级，通过此组件逐级查看并选择</li>
<li>[新增] page-header 组件,页面的路径比较简单,则使用页头组件要,比面包屑更直观一点</li>
<li>[修复] layer 组件 btn 属性 callback 回调参数 id 为空的问题</li>
<li>[优化] layer 组件 callback 回调 id 参数, 配合 layer.close() 关闭当前弹层</li>
<li>[优化] layui-vue 在 nuxt3 中的使用, 将 darkreader 替换为 ssr-darkreader</li>
</ul>
</li>
</ul>
<ul>
<a name="1-1-8"></a>
<li>
<h3>1.1.8 <span class="layui-badge-rim">2022-06-20</span></h3>
<ul>
<li>[新增] provider 组件 theme 属性 auto 值, 自动跟随系统主题</li>
<li>[新增] checkbox 组件 is-indeterminate 属性, 用于展示半选状态</li>
<li>[新增] layui-vue-helper 插件, 用于 Visual Studio Code 辅助开发</li>
<li>[新增] textarea 组件 show-count 属性, 用于展示输入长度与 max-length</li>
<li>[修复] carousel 组件加载时无法获取 carousel-item 轮播项</li>
<li>[修复] input-number 组件 modelValue 属性类型错误</li>
<li>[修复] checkbox 组件 夜间模式 选中状态异常</li>
<li>[优化] table 组件 checkedKeys 属性, 加入半选状态</li>
</ul>
</li>
</ul>
<ul>
<a name="1-1-7"></a>
<li>
<h3>1.1.7 <span class="layui-badge-rim">2022-06-13</span></h3>
<ul>
<li>[新增] upload 组件 default 插槽, 允许自定义上传入口</li>
<li>[新增] transfer 组件 width 与 height 属性, 允许自定义盒子尺寸</li>
<li>[新增] table 组件 max-height 与 height 属性, 超出指定高度标题固定</li>
<li>[修复] transfer 组件 input 样式, 由原生 input 修改为 lay-input 组件</li>
<li>[修复] transfer 组件 transfer-data 高度超出 transfer-box 的问题</li>
<li>[修复] table 组件 按需加载 时, 内置 checkbox 无法正常显示的问题</li>
<li>[优化] input 组件 modelValue 属性非必填, 使用 @input 回调取值</li>
</ul>
</li>
</ul>
<ul>
<a name="1-1-6"></a>
<li>
<h3>1.1.6 <span class="layui-badge-rim">2022-06-11</span></h3>
<ul>
<li>[新增] input 组件 prefix-icon 属性, 用于设置输入框前置图标</li>
<li>[新增] input 组件 suffix-icon 属性, 用于设置输入框后置图标</li>
<li>[修复] date-picker 组件 v-model 无法解析 yy-mm-dd 年月日, 会显示现在日期的问题</li>
<li>[优化] dropdown 组件 trigger 属性为 context-menu 值, 不再根据鼠标位置展示内容</li>
<li>[优化] input-number 组件 v-model 内容默认对齐方式为 center, 更符合普遍的审美</li>
<li>[升级] vue, vueuse, vue-i18n, darkreader, rollup 等核心依赖 </li>
</ul>
</li>
</ul>
<ul>
<a name="1-1-5"></a>
<li>
<h3>1.1.5 <span class="layui-badge-rim">2022-06-04</span></h3>
<ul>
<li>[新增] input 组件 label-position 属性, 通过设置改变表单域标签的位置, top、left 为可选值</li>
<li>[修复] tab 组件 brief 风格 position 为 bottom 时 active-bar 的位置</li>
<li>[修复] tab 组件 brief 风格 background-color 为 transparent 透明色</li>
<li>[优化] tab 组件 tab-panel 宽度超出当前组件宽度时, 增加左右滑动的能力</li>
<li>[优化] input 组件 foucs 状态, 新增 global-checked-color 选中色</li>
<li>[优化] layer 组件 夜间模式 样式, 新增 border 边框样式</li>
</ul>
</li>
</ul>
<ul>
<a name="1-1-4"></a>
<li>
<h3>1.1.4 <span class="layui-badge-rim">2022-05-29</span></h3>
<ul>
<li>[新增] table 组件 childrenColumnName 属性, 配置 children 子节点为其他字段</li>
<li>[新增] table 组件 indent-size 属性, 用于 tree-table 模式控制每一层的缩进宽度</li>
<li>[新增] table 组件 expand 插槽, 内容较多不能一次性完全展示时使用, 参数 data 为当前行数据</li>
<li>[新增] table 组件 children 字段解析, 当字段中存在 children 时会自动转化为树表</li>
<li>[新增] tree 组件 title 插槽, 参数 data 为当前行数据, 用于自定义节点标题</li>
</ul>
</li>
</ul>
<ul>
<a name="1-1-3"></a>
<li>
<h3>1.1.3 <span class="layui-badge-rim">2022-05-27</span></h3>
<ul>
<li>[新增] input 组件 clear 事件, 清空内容时触发的无参事件</li>
<li>[新增] avatar 组件 alt 属性, 用于设置描述图像无法正常显示时的替换文本</li>
<li>[新增] radio-group 组件, 公用 name change v-model 属性, 简化多 radio 使用</li>
<li>[修复] tab 组件初始化时, 因无法监听到 slots 变化, 而导致 layui-tab-title 无法正常显示的问题</li>
<li>[优化] input 组件 allow-clear 触发策略, 由始终显示调整为 v-model 不为空显示</li>
<li>[优化] icon-picker 组件 search 功能, 为 input 输入框增加清空操作</li>
</ul>
</li>
</ul>
</lay-timeline-item>
</lay-timeline>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
return {
}
}
}
</script>
:::

61
package/document-component/src/document/zh-CN/guide/dark.md Normal file
View File

@@ -0,0 +1,61 @@
::: title 夜间模式
:::
::: describe 默认情况下, 网站主题为日间模式。
:::
::: describe 若启用夜间模式, 使用 "全局配置" 组件配合 theme 属性, 设置为 `dark` 值。
:::
```vue
<template>
<lay-config-provider :theme="theme">
<App />
</lay-config-provider>
</template>
<script setup>
const theme = ref('dark')
</script>
```
::: title 偏好设置
:::
::: describe 若内置的夜间模式不满足要求时, 可通过 dark-partial 属性进行偏好设置。
:::
```vue
<template>
<lay-config-provider :theme="theme" :dark-partial="darkPartial">
<App />
</lay-config-provider>
</template>
<script setup>
const theme = ref('dark')
const darkPartial = {
brightness: 100,
contrast: 90,
grayscale: 0,
darkSchemeBackgroundColor: "black";
darkSchemeTextColor: "white";
}
</script>
```
::: title Dark Partial 属性
:::
::: table
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
| ----------- | -------- | ------- | --------- | ---------------------------------- |
| brightness | 亮度 | `number` | `100` | `0 - 100` |
| contrast | 对比度 | `number` | `100` | `0 - 100` |
| grayscale | 灰度值 | `number` | `0` | `0 - 100` |
| darkSchemeBackgroundColor | 背景颜色 | `string` | -- | -- |
| darkSchemeTextColor | 前景颜色 | `string` | -- | -- |
:::

193
package/document-component/src/document/zh-CN/guide/getStarted.md Normal file
View File

@@ -0,0 +1,193 @@
::: title 快速上手
:::
<br>
<p>
<a href="http://layui-vue.pearadmin.com" style="margin-left:30px;">
<img src="../../../assets/layui-logo.png" alt="layui" width="105" style="border-radius:12px;">
</a>
<span style="font-size:32px;color:#e2e2e2;margin:30px;">+</span>
<a href="http://layui-vue.pearadmin.com">
<img src="https://qn.antdv.com/vue.png" alt="layui" width="105" style="border-radius:12px;">
</a>
<span style="font-size:32px;color:#e2e2e2;margin:30px;">=</span>
<a href="http://layui-vue.pearadmin.com">
<img src="../../../assets/logo.jpg" alt="layui" width="105" style="border-radius:12px;">
</a>
</p>
<br>
::: title 使用包管理
:::
::: describe 使用 npm 工具安装 layui vue, 然后你可以使用打包工具, 如 vite rollup.
:::
```
npm install @layui/layui-vue --save
```
::: title 完整引入
:::
```js
import App from './App.vue'
import { createApp } from 'vue'
import Layui from '@layui/layui-vue'
import '@layui/layui-vue/lib/index.css'
createApp(App).use(Layui).mount('#app')
```
::: describe 以上代码便完成了 layui-vue 的引入。需要注意的是，样式文件需要单独引入。
:::
::: title 自动按需
:::
::: describe 安装 <a href="https://github.com/antfu/unplugin-vue-components" target="_blank" style="color:#5FB878"><code>unplugin-vue-components</code></a> 和 <a href="https://github.com/antfu/unplugin-auto-import" target="_blank" style="color:#5FB878"><code>unplugin-auto-import</code></a> 插件，插件会自动解析模板中用到的组件，并引入组件和样式。
:::
```
npm install -D unplugin-vue-components unplugin-auto-import
```
::: describe 修改 vite.config.js 文件
:::
```js
// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { LayuiVueResolver } from 'unplugin-vue-components/resolvers'
export default {
plugins: [
// ...其它插件
AutoImport({
resolvers: [LayuiVueResolver()],
}),
// 自动解析 layui-vue 组件
Components({
resolvers: [LayuiVueResolver()],
}),
],
}
```
::: describe LayuiVueResolver 类型声明
:::
```ts
export declare function LayuiVueResolver(
options?: LayuiVueResolverOptions = {}
): ComponentResolver
export interface LayuiVueResolverOptions {
/**
* 将样式与组件一起导入
*
* @default 'css'
*/
importStyle?: boolean | 'css'
/**
* 是否解析图标
*
* @default false
*/
resolveIcons?: boolean
/**
* 排除不需要自动导入的组件
*
* eg: exclude: ['LayDocTable', /^LayDoc[A-Z]/,]
*/
exclude?: Array<string | RegExp>;
}
```
::: title 手动按需
:::
::: describe 需要手动引入组件样式
:::
```js
import App from './App.vue'
import { createApp } from 'vue'
import { LayButton, LayTable } from '@layui/layui-vue'
import '@layui/layui-vue/es/button/index.css';
import '@layui/layui-vue/es/table/index.css';
var app = createApp(App).
app.component("LayButton", LayButton);
app.component("LayTable", LayTable);
app.mount('#app')
```
::: title 基础示例
:::
```html
<lay-layout>
<lay-header>
<lay-logo>Layui Admin</lay-logo>
</lay-header>
<lay-side></lay-side>
<lay-body>
<router-view></router-view>
</lay-body>
<lay-footer>pearadmin.com</lay-footer>
</lay-layout>
```
::: title 浏览器导入
:::
::: describe 根据不同的 CDN 提供商有不同的引入方式，我们在这里以 unpkg 举例。
:::
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入 layui-vue 样式 -->
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@layui/layui-vue/lib/index.css">
<!-- 引入 Vue 3, 使用全局变量 Vue -->
<script src="https://unpkg.com/vue@3"></script>
<!-- 引入 layui-vue 组件库, 使用全局变量 LayuiVue -->
<script src="https://unpkg.com/@layui/layui-vue"></script>
</head>
<body>
<div id="app">
<lay-button @click="openLayer">Hello</lay-button>
</div>
</body>
<script>
const { createApp, ref } = Vue;
const { layer } = LayuiVue;
const App = {
setup() {
const openLayer = function () {
layer.msg("hello");
}
return {
openLayer
}
}
};
const app = createApp(App);
app.use(LayuiVue);
app.mount('#app');
</script>
</html>
```

21
package/document-component/src/document/zh-CN/guide/introduce.md Normal file
View File

@@ -0,0 +1,21 @@
::: title 基本介绍
:::
<p>
<a href="http://layui-vue.pearadmin.com">
<img src="../../../assets/logo-new.png" alt="layui" width="440">
</a>
</p>
::: quote
layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库 , Layui 的 另 一 种 呈 现 方 式
:::
<lay-timeline>
<lay-timeline-item title="2022年，layui-vue 里程碑版本 1.0.0 发布" simple></lay-timeline-item>
<lay-timeline-item title="2017年，layui 里程碑版本 2.0 发布" simple></lay-timeline-item>
<lay-timeline-item title="2016年，layui 首个版本发布" simple></lay-timeline-item>
<lay-timeline-item title="2015年，layui 孵化" simple></lay-timeline-item>
</lay-timeline>

38
package/document-component/src/document/zh-CN/guide/locale.md Normal file
View File

@@ -0,0 +1,38 @@
::: title 国际化
:::
::: describe 目前的默认文案是简体中文，如果需要使用其他语言，可以参考下面的方案。
:::
```vue
<template>
<lay-config-provider locale="zh_CN">
<App />
</lay-config-provider>
</template>
```
::: describe layui-vue 内部会维护一个 vue-i18n 实例, 你无需再去创建，直接使用 useI18n() 获取即可
:::
::: describe 你可以使用 locales 属性来扩展语言包, 用户自定义语言包优先级大于组件库内部维护的语言包, 即你可以扩展亦可以覆盖。
:::
```vue
<template>
<lay-config-provider locale="zh_CN" :locales="locales">
<App />
</lay-config-provider>
</template>
<script setup>
const locales = [
'zh_CN': {
message: '你好, layui-vue'
},
'en_US': {
message: 'hello, layui-vue'
}
];
</script>
```

158
package/document-component/src/document/zh-CN/guide/member.md Normal file
View File

@@ -0,0 +1,158 @@
::: title 团队成员
:::
<lay-card>
<lay-row>
<lay-col md="2">
<lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/1611/4835367_Jmysy_1578975358.png"></lay-avatar>
</lay-col>
<lay-col md="3">
就眠仪式
</lay-col>
<lay-col md="8">
焦点：layui-vue
</lay-col>
<lay-col md="4">
地点：中国 北京
</lay-col>
<lay-col md="6">
其他：Gitee Github
</lay-col>
</lay-row>
</lay-card>
<lay-card>
<lay-row>
<lay-col md="2">
<lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/1755/5267877_jobin_jia_1608578025.png"></lay-avatar>
</lay-col>
<lay-col md="3">
落小梅
</lay-col>
<lay-col md="8">
焦点：tree table
</lay-col>
<lay-col md="4">
地点：中国 湖南
</lay-col>
<lay-col md="6">
其他：Gitee Github
</lay-col>
</lay-row>
</lay-card>
<lay-card>
<lay-row>
<lay-col md="2">
<lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/702/2106738_wanglin300_1639442830.png"></lay-avatar>
</lay-col>
<lay-col md="3">
halo
</lay-col>
<lay-col md="8">
焦点：slider
</lay-col>
<lay-col md="4">
地点：中国 北京
</lay-col>
<lay-col md="6">
其他：Gitee Github
</lay-col>
</lay-row>
</lay-card>
<lay-card>
<lay-row>
<lay-col md="2">
<lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/1871/5614379_xumisky_1607057214.png"></lay-avatar>
</lay-col>
<lay-col md="3">
须弥
</lay-col>
<lay-col md="8">
焦点：layui-vue
</lay-col>
<lay-col md="4">
地点：中国 广州
</lay-col>
<lay-col md="6">
其他：<a href="https://gitee.com/xumisky">Gitee</a> <a href="https://github.com/xumiSky">Github</a>
</lay-col>
</lay-row>
</lay-card>
<lay-card>
<lay-row>
<lay-col md="2">
<lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/2469/7407590_wcg666_1640528494.png!avatar200"></lay-avatar>
</lay-col>
<lay-col md="3">
Sight
</lay-col>
<lay-col md="8">
焦点：layui-vue layer-vue
</lay-col>
<lay-col md="4">
地点：中国 未知
</lay-col>
<lay-col md="6">
其他：Gitee Github
</lay-col>
</lay-row>
</lay-card>
<lay-card>
<lay-row>
<lay-col md="2">
<lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/2596/7789823_finalsummer_1613993823.png"></lay-avatar>
</lay-col>
<lay-col md="3">
finalsummer
</lay-col>
<lay-col md="8">
焦点：layer-vue
</lay-col>
<lay-col md="4">
地点：中国 未知
</lay-col>
<lay-col md="6">
其他：Gitee Github
</lay-col>
</lay-row>
</lay-card>
<lay-card>
<lay-row>
<lay-col md="2">
<lay-avatar src="http://mms0.baidu.com/it/u=1690972933,1482111264&fm=253&app=138&f=JPEG&fmt=auto&q=75?w=500&h=500"></lay-avatar>
</lay-col>
<lay-col md="3">
莫名点
</lay-col>
<lay-col md="8">
焦点：skeleton step splitPanel
</lay-col>
<lay-col md="4">
地点：中国 上海
</lay-col>
<lay-col md="6">
其他：<a href="https://gitee.com/dingyongya">Gitee</a> <a href="https://github.com/dyywork">Github</a>
</lay-col>
</lay-row>
</lay-card>
<br>
::: title 社区伙伴
:::
::: quote
在 人 的 尺 度 里，世 界 既 无 始，也 无 终，唯 一 的 信 仰 是，总 有 人 认 得 你 站 在 暴 风 雪 里 的 样 子。
:::
::: describe
<a href="https://github.com/layui-vue/layui-vue/graphs/contributors">
<img src="https://contrib.rocks/image?repo=layui-vue/layui-vue" />
</a>
:::

67
package/document-component/src/document/zh-CN/guide/plugin.md Normal file
View File

@@ -0,0 +1,67 @@
::: title Visual Studio Code 插件
:::
::: describe layui-vue-helper 是 layui-vue 的开发增强工具，提供代码片段，自动补全，悬浮提示功能
:::
::: title 安装
:::
::: describe 在 Visual Studio Code 内置或网页版扩展市场搜索 layui-vue-helper，点击安装即可，插件会在 Vue 和 HTML 文件中自动激活
:::
::: title 自动补全
:::
> 按 `Ctrl+Space` (Windows, Linux) 或 `Cmd+Space` (macOS) 查看自动补全列表，目前只支持属性和事件补全
> 支持 Vue 和 HTML 文件
> ![自动补全.gif](https://s2.loli.net/2022/06/20/LioZGshVlFQYyew.gif)
::: title 文档悬停提示
:::
> 移动光标到 layui-vue 的 tag 或 prop，显示悬浮文档。
> ![悬浮提示.gif](https://s2.loli.net/2022/06/20/iKT3gn7bSxVFByX.gif)
::: title 代码片段
:::
> 输入片段触发词，按 `Tab` 切换预设输入点
> ![代码片段.gif](https://s2.loli.net/2022/06/20/zVxXdkaeEUjK4L5.gif)
> **其它代码片段的触发词和 layui-vue 组件名一致**
::: table
| Trigger Key | Describe |
|-------------|-------------------------|
| layer-open | layer-vue 弹层 open()方法|
| layer-load | layer-vue 弹层 load()方法|
| layer-confirm| layer-vue 弹层 confirm()方法|
| layer-msg | layer-vue 弹层 msg()方法|
| layer-drawer| layer-vue 弹层 drawer()方法|
| lay-cdn | layui-vue CDN |
| lay-cdn-es | layui-vue ES Module CDN |
| lay-cdn-css | layui-vue css CDN |
| v-cdn | Vue 3 CDN |
| v-cdn-es | Vue 3 ES Module CDN |
| !v | Vue setup 传统模板 |
| !vs | Vue setup 语法糖模板 |
| !lay-html | layui-vue-html 模板 |
| !lay-html-es| layui-vue-html ES Module 模板 |
:::
<style>
.markdown-body blockquote img{
width: 650px;
height: 400px;
}
.markdown-body table{
margin-left: 35px;
width: 650px;
}
</style>

11
package/document-component/src/document/zh-CN/guide/problem.md Normal file
View File

@@ -0,0 +1,11 @@
::: title 常见问题
:::
::: describe 以下整理了一些 Layui Vue 社区常见的问题和官方答复，在提问之前建议找找有没有类似的问题。
:::
::: describe 若你想在 DOM 中直接书写 Vue 模板，Vue 则必须从 DOM 中获取模板字符串。因为浏览器的原生 HTML 解析行为，因此有一些需要注意的事项。
:::
::: describe <a>https://staging-cn.vuejs.org/guide/essentials/component-basics.html#dom-template-parsing-caveats</a >
:::

53
package/document-component/src/document/zh-CN/guide/theme.md Normal file
View File

@@ -0,0 +1,53 @@
::: title 定制主题
:::
::: describe 全局化配置设置内部组件的主题、语言和组件卸载于其他位置的 DOM 的类名。
:::
```vue
<template>
<lay-config-provider :themeVariable="themeVariable">
<App />
</lay-config-provider>
</template>
<script setup>
const themeVariable = {
"--global-primary-color":"red",
"--global-checked-color":"red"
}
</script>
```
::: describe 以下是一些最常用的通用变量，所有样式变量可以在 这里 找到。
:::
```
--global-primary-color: #009688; // 主题色
--global-normal-color: #1e9fff; // 通用色
--global-warm-color: #ffb800; // 警告色
--global-danger-color: #ff5722; // 危险色
--global-checked-color: #5fb878; // 选中色
--global-border-radius: 2px; // 圆角度
--global-neutral-color-1: #FAFAFA; // 辅助色-1
--global-neutral-color-2: #F6F6F6; // 辅助色-2
--global-neutral-color-3: #eeeeee; // 辅助色-3
--global-neutral-color-4: #e2e2e2; // 辅助色-4
--global-neutral-color-5: #dddddd; // 辅助色-5
--global-neutral-color-6: #d2d2d2; // 辅助色-6
--global-neutral-color-7: #cccccc; // 辅助色-7
--global-neutral-color-8: #c2c2c2; // 辅助色-8
```