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

feat: 主题支持次色可配置

Browse Source
This commit is contained in:
就眠儀式
2022-02-23 18:38:47 +08:00
parent df565ca61d
commit ee2e03febc
50 changed files with 153 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
example/docs/zh-CN/components/color.md
View File

@@ -111,7 +111,7 @@ export default {
<template>
<ul class="layui-row site-doc-color site-doc-necolor">
<li class="layui-col-md12">
<div style="background-color: #FAFAFA;">
<div style="background-color: @global-neutral-color-1;">
<p>#FAFAFA</p><p>
</p></div>
</li>

23
example/docs/zh-CN/guide/theme.md
View File

@@ -24,7 +24,30 @@ const themeVariable = {
```
--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;
--global-neutral-color-2: #F6F6F6;
--global-neutral-color-3: #eeeeee;
--global-neutral-color-4: #e2e2e2;
--global-neutral-color-5: #dddddd;
--global-neutral-color-6: #d2d2d2;
--global-neutral-color-7: #cccccc;
--global-neutral-color-8: #c2c2c2;
```

2
example/src/components/LaySearch.vue
View File

@@ -41,7 +41,7 @@
<script setup name="LaySelect" lang="ts">
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { Recordable } from '../../../src/module/type'
import { Recordable } from '../../../src/types'
const props = defineProps<{
datas?: Recordable[]

23
example/src/layouts/Layout.vue
View File

@@ -59,13 +59,21 @@
></lay-icon>
</a>
<template #content>
<div style="width: 400px; padding:0px 10px 10px 10px;">
<div style="width: 380px; padding:0px 10px 10px 10px;">
<lay-color-picker v-model="themeVariable['--global-primary-color']"></lay-color-picker>&nbsp;
<lay-color-picker v-model="themeVariable['--global-normal-color']"></lay-color-picker>&nbsp;
<lay-color-picker v-model="themeVariable['--global-warm-color']"></lay-color-picker>&nbsp;
<lay-color-picker v-model="themeVariable['--global-danger-color']"></lay-color-picker>&nbsp;
<lay-color-picker v-model="themeVariable['--global-checked-color']"></lay-color-picker>&nbsp;
<lay-input style="display:inline-block;width:150px;" v-model="themeVariable['--global-border-radius']"></lay-input>
<lay-input v-model="themeVariable['--global-border-radius']" style="display:inline-block;width:130px;"></lay-input>
<lay-color-picker v-model="themeVariable['--global-neutral-color-1']"></lay-color-picker>&nbsp;
<lay-color-picker v-model="themeVariable['--global-neutral-color-2']"></lay-color-picker>&nbsp;
<lay-color-picker v-model="themeVariable['--global-neutral-color-3']"></lay-color-picker>&nbsp;
<lay-color-picker v-model="themeVariable['--global-neutral-color-4']"></lay-color-picker>&nbsp;
<lay-color-picker v-model="themeVariable['--global-neutral-color-5']"></lay-color-picker>&nbsp;
<lay-color-picker v-model="themeVariable['--global-neutral-color-6']"></lay-color-picker>&nbsp;
<lay-color-picker v-model="themeVariable['--global-neutral-color-7']"></lay-color-picker>&nbsp;
<lay-color-picker v-model="themeVariable['--global-neutral-color-8']"></lay-color-picker>
<lay-button fluid>导 出 配 置</lay-button>
</div>
</template>
@@ -117,6 +125,7 @@ import zh_CN from "../locales/zh_CN.ts";
import en_US from "../locales/en_US.ts";
export default {
setup() {
const { t } = useI18n();
const route = useRoute();
const router = useRouter();
@@ -134,7 +143,15 @@ export default {
"--global-warm-color": "#ffb800",
"--global-danger-color": "#ff5722",
"--global-checked-color": "#5fb878",
"--global-border-radius": "2px"
"--global-border-radius": "2px",
"--global-neutral-color-1": "#FAFAFA",
"--global-neutral-color-2": "#F6F6F6",
"--global-neutral-color-3": "#eeeeee",
"--global-neutral-color-4": "#e2e2e2",
"--global-neutral-color-5": "#dddddd",
"--global-neutral-color-6": "#d2d2d2",
"--global-neutral-color-7": "#cccccc",
"--global-neutral-color-8": "#c2c2c2",
});
const menus = [];