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

docs: 主题编辑器

Browse Source
This commit is contained in:
就眠儀式 2022-02-20 04:00:44 +08:00
parent ffecfa43a4
commit 8f21f8e132
4 changed files with 101 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,9 +1,10 @@
<template> <template>
<lay-config-provider <lay-config-provider
:theme="theme" :theme="theme"
:locale="locale" :locale="locale"
:locales="locales" :locales="locales"
:themeVariable="themeVariable"> :themeVariable="themeVariable"
>
<lay-layout class="layui-layout-document"> <lay-layout class="layui-layout-document">
<lay-header <lay-header
><lay-logo style="box-shadow: 0 0px 2px 0 rgba(0, 0, 0, 0.15)"> ><lay-logo style="box-shadow: 0 0px 2px 0 rgba(0, 0, 0, 0.15)">
@ -14,19 +15,25 @@
style="margin-top: 0px; margin-bottom: 0px" style="margin-top: 0px; margin-bottom: 0px"
> >
<li class="layui-nav-item"> <li class="layui-nav-item">
<router-link to="/zh-CN/index"> {{ t('nav.home')}} </router-link> <router-link to="/zh-CN/index"> {{ t("nav.home") }} </router-link>
</li> </li>
<li class="layui-nav-item"> <li class="layui-nav-item">
<router-link to="/zh-CN/guide"> {{ t('nav.guide')}} </router-link> <router-link to="/zh-CN/guide"> {{ t("nav.guide") }} </router-link>
</li> </li>
<li class="layui-nav-item"> <li class="layui-nav-item">
<router-link to="/zh-CN/components"> {{ t('nav.components') }} </router-link> <router-link to="/zh-CN/components">
{{ t("nav.components") }}
</router-link>
</li> </li>
<li class="layui-nav-item"> <li class="layui-nav-item">
<router-link to="/zh-CN/environment"> {{ t('nav.environment') }} </router-link> <router-link to="/zh-CN/environment">
{{ t("nav.environment") }}
</router-link>
</li> </li>
<li class="layui-nav-item"> <li class="layui-nav-item">
<router-link to="/zh-CN/material"> {{ t('nav.material') }} </router-link> <router-link to="/zh-CN/material">
{{ t("nav.material") }}
</router-link>
</li> </li>
<li class="layui-nav-item"> <li class="layui-nav-item">
<lay-form> <lay-form>
@ -39,12 +46,30 @@
style="margin-top: 0px; margin-bottom: 0px" style="margin-top: 0px; margin-bottom: 0px"
> >
<li class="layui-nav-item"> <li class="layui-nav-item">
<a <lay-dropdown>
href="https://layui-vue.gitee.io/layui-vue-playground" <a href="javascript:void(0);">
target="_blank" <lay-icon
> type="layui-icon-theme"
<lay-icon type="layui-icon-util" size="15px"></lay-icon> size="15px"
</a> style="
color: rgba(255, 255, 255, 0.7);
padding-left: 30px;
padding-right: 30px;
"
></lay-icon>
</a>
<template #content>
<div style="width: 400px; 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-button fluid>导 出 配 置</lay-button>
</div>
</template>
</lay-dropdown>
</li> </li>
<li class="layui-nav-item"> <li class="layui-nav-item">
<a href="https://gitee.com/layui-vue"> <a href="https://gitee.com/layui-vue">
@ -52,9 +77,21 @@
</a> </a>
</li> </li>
<li class="layui-nav-item"> <li class="layui-nav-item">
<a href="javascript:void(0)"> <a href="javascript:void(0)">
<lay-badge type="rim" class="layui-local-badge" v-if="locale === 'en_US'" @click="changeLocale('zh_CN')">中 文</lay-badge> <lay-badge
<lay-badge type="rim" class="layui-local-badge" v-else @click="changeLocale('en_US')">英 文</lay-badge> type="rim"
class="layui-local-badge"
v-if="locale === 'en_US'"
@click="changeLocale('zh_CN')"
>中 文</lay-badge
>
<lay-badge
type="rim"
class="layui-local-badge"
v-else
@click="changeLocale('en_US')"
>英 文</lay-badge
>
</a> </a>
</li> </li>
<li class="layui-nav-item"> <li class="layui-nav-item">
@ -72,26 +109,33 @@
</lay-config-provider> </lay-config-provider>
</template> </template>
<script> <script>
import { ref, watch } from "vue"; import { computed, ref, watch } from "vue";
import { useRouter, useRoute } from "vue-router"; import { useRouter, useRoute } from "vue-router";
import menu from "../view/utils/menus"; import menu from "../view/utils/menus";
import { useI18n } from 'vue-i18n'; import { useI18n } from "vue-i18n";
import zh_CN from "../locales/zh_CN.ts"; import zh_CN from "../locales/zh_CN.ts";
import en_US from "../locales/en_US.ts"; import en_US from "../locales/en_US.ts";
export default { export default {
setup() { setup() {
const { t } = useI18n();
const { t } = useI18n();
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
const locale = ref('zh_CN'); const locale = ref("zh_CN");
const currentPath = ref("/zh-CN/guide"); const currentPath = ref("/zh-CN/guide");
const locales = [ const locales = [
{name:'zh_CN',locale: zh_CN, merge: true}, { name: "zh_CN", locale: zh_CN, merge: true },
{name:'en_US',locale: en_US, merge: true}, { name: "en_US", locale: en_US, merge: true },
]; ];
const theme = "light"; const theme = "light";
const themeVariable = {} const themeVariable = ref({
"--global-primary-color": "#009688",
"--global-normal-color": "#1e9fff",
"--global-warm-color": "#ffb800",
"--global-danger-color": "#ff5722",
"--global-checked-color": "#5fb878",
"--global-border-radius": "2px"
});
const menus = []; const menus = [];
@ -101,17 +145,21 @@ export default {
}); });
}); });
watch(() => route.path, (val) => { watch(
() => route.path,
(val) => {
currentPath.value = val; currentPath.value = val;
},{immediate: true, deep: true}); },
{ immediate: true, deep: true }
);
const handleClick = function (menu) { const handleClick = function (menu) {
router.push(menu.path); router.push(menu.path);
}; };
const changeLocale = function(lang) { const changeLocale = function (lang) {
locale.value = lang; locale.value = lang;
} };
return { return {
t, t,
@ -122,14 +170,13 @@ export default {
currentPath, currentPath,
handleClick, handleClick,
changeLocale, changeLocale,
themeVariable themeVariable,
}; };
}, },
}; };
</script> </script>
<style> <style>
.layui-layout-document > .layui-header { .layui-layout-document > .layui-header {
z-index: 9999; z-index: 9999;
width: 100%; width: 100%;
@ -168,13 +215,13 @@ export default {
.layui-header .layui-local-badge { .layui-header .layui-local-badge {
font-size: 12.4px; font-size: 12.4px;
background: transparent; background: transparent;
color:rgba(255, 255, 255, 0.7); color: rgba(255, 255, 255, 0.7);
border-color:rgba(255, 255, 255, 0.7); border-color: rgba(255, 255, 255, 0.7);
} }
.layui-header > .layui-local:hover { .layui-header > .layui-local:hover {
color:white; color: white;
border-color:white; border-color: white;
} }
.layui-menu-docs { .layui-menu-docs {

5
src/component/colorPicker/index.less
View File

@ -1,9 +1,11 @@
@import "../../theme/variable.less";
.layui-color-picker { .layui-color-picker {
position: relative; position: relative;
user-select: none; user-select: none;
width: 320px; width: 320px;
background: #fff; background: #fff;
padding: 10px; padding: 8px;
} }
/* 饱和度和亮度 */ /* 饱和度和亮度 */
@ -106,6 +108,7 @@
width: 26px; width: 26px;
height: 26px; height: 26px;
display: block; display: block;
border-radius: @global-border-radius;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAWElEQVRIiWM8fubkfwYygKWJOSM5+mCAhRLNoxaPWjxq8ajFoxbTyeL/DAfJ0Xjs3Cl7Siwmu4Yht1aDgZEYx6MWj1o8avGoxaMWD3qLya5X//4nqx6HAQC7RBGFzolqTAAAAABJRU5ErkJggg=="); background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAWElEQVRIiWM8fubkfwYygKWJOSM5+mCAhRLNoxaPWjxq8ajFoxbTyeL/DAfJ0Xjs3Cl7Siwmu4Yht1aDgZEYx6MWj1o8avGoxaMWD3qLya5X//4nqx6HAQC7RBGFzolqTAAAAABJRU5ErkJggg==");
background-size: 10px 10px; background-size: 10px 10px;
} }

28
src/component/colorPicker/index.vue
View File

@ -101,7 +101,7 @@ import "./index.less";
import LayDropdown from "../dropdown/index.vue"; import LayDropdown from "../dropdown/index.vue";
import { ref, computed, watch, onMounted } from "vue"; import { ref, computed, watch, onMounted } from "vue";
const emit = defineEmits(["update:color"]); const emit = defineEmits(["update:modelValue"]);
export interface LayColorPicker { export interface LayColorPicker {
modelValue?: any; modelValue?: any;
@ -128,7 +128,6 @@ let value = ref(1);
let red = ref(255); let red = ref(255);
let green = ref(0); let green = ref(0);
let blue = ref(0); let blue = ref(0);
let alpha = ref(1); let alpha = ref(1);
onMounted(() => { onMounted(() => {
@ -140,12 +139,11 @@ onMounted(() => {
}); });
watch([red, green, blue], (newValue) => { watch([red, green, blue], (newValue) => {
emit("update:color", {
r: red.value, emit("update:modelValue", rgba2hex(red.value,
g: green.value, green.value,
b: blue.value, blue.value,
a: alpha.value, alpha.value));
});
let { h, s, v } = rgb2hsv(red.value, green.value, blue.value); let { h, s, v } = rgb2hsv(red.value, green.value, blue.value);
@ -160,12 +158,10 @@ watch([red, green, blue], (newValue) => {
}); });
watch(alpha, () => { watch(alpha, () => {
emit("update:color", { emit("update:modelValue", rgba2hex(red.value,
r: red.value, green.value,
g: green.value, blue.value,
b: blue.value, alpha.value));
a: alpha.value,
});
// 移动透明度滑块 // 移动透明度滑块
alphaSliderStyle.value = `left: ${ alphaSliderStyle.value = `left: ${
alpha.value >= 1 ? "calc(100% - 6px)" : alpha.value * 100 + "%" alpha.value >= 1 ? "calc(100% - 6px)" : alpha.value * 100 + "%"
@ -351,9 +347,7 @@ function parseColor(color: any) {
let r, g, b, a; let r, g, b, a;
if (typeof color === "string") { if (typeof color === "string") {
if ( if (
/^#?([0-9a-fA-F]{6}|[0-9a-fA-F]{8}|[0-9a-fA-F]{3}|[0-9a-fA-F]{4})$/.test( /^#?([0-9a-fA-F]{6}|[0-9a-fA-F]{8}|[0-9a-fA-F]{3}|[0-9a-fA-F]{4})$/.test(color)
color
)
) { ) {
return hex2rgba(color); return hex2rgba(color);
} }

17
src/theme/index.less
View File

@ -1925,23 +1925,18 @@ a cite {
left: 0; left: 0;
z-index: 899; z-index: 899;
min-width: 100%; min-width: 100%;
max-height: 360px; //max-height: 360px;
overflow-y: auto; overflow-y: auto;
background-color: #fff; background-color: #fff;
box-sizing: border-box; box-sizing: border-box;
} }
.layui-dropdown dl::before {
content: " ";
display: block;
height: 4px;
width: 100%;
}
.layui-dropdown dl > .layui-dropdown-menu { .layui-dropdown dl > .layui-dropdown-menu {
border: 1px solid #eee; border: 1px solid #eee;
border-radius: @global-border-radius; border-radius: @global-border-radius;
} }
.layui-dropdown-up dl { .layui-dropdown-up > dl {
display: block; display: block;
} }
@ -2619,11 +2614,9 @@ body .layui-util-face .layui-layer-content {
} }
.layui-colorpicker { .layui-colorpicker {
width: 26px;
height: 26px;
border: 1px solid #eee; border: 1px solid #eee;
padding: 5px; padding: 5px;
border-radius: 2px; border-radius: @global-border-radius;
line-height: 24px; line-height: 24px;
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
@ -2664,7 +2657,7 @@ body .layui-util-face .layui-layer-content {
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid rgba(0, 0, 0, 0.15); border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 2px; border-radius: @global-border-radius;
text-align: center; text-align: center;
} }