docs: 主题编辑器
This commit is contained in:
就眠儀式
parent
ffecfa43a4
commit
8f21f8e132
@ -1,9 +1,10 @@
|
||||
<template>
|
||||
<lay-config-provider
|
||||
:theme="theme"
|
||||
:theme="theme"
|
||||
:locale="locale"
|
||||
:locales="locales"
|
||||
:themeVariable="themeVariable">
|
||||
:themeVariable="themeVariable"
|
||||
>
|
||||
<lay-layout class="layui-layout-document">
|
||||
<lay-header
|
||||
><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"
|
||||
>
|
||||
<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 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 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 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 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 class="layui-nav-item">
|
||||
<lay-form>
|
||||
@ -39,12 +46,30 @@
|
||||
style="margin-top: 0px; margin-bottom: 0px"
|
||||
>
|
||||
<li class="layui-nav-item">
|
||||
<a
|
||||
href="https://layui-vue.gitee.io/layui-vue-playground"
|
||||
target="_blank"
|
||||
>
|
||||
<lay-icon type="layui-icon-util" size="15px"></lay-icon>
|
||||
</a>
|
||||
<lay-dropdown>
|
||||
<a href="javascript:void(0);">
|
||||
<lay-icon
|
||||
type="layui-icon-theme"
|
||||
size="15px"
|
||||
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>
|
||||
<lay-color-picker v-model="themeVariable['--global-normal-color']"></lay-color-picker>
|
||||
<lay-color-picker v-model="themeVariable['--global-warm-color']"></lay-color-picker>
|
||||
<lay-color-picker v-model="themeVariable['--global-danger-color']"></lay-color-picker>
|
||||
<lay-color-picker v-model="themeVariable['--global-checked-color']"></lay-color-picker>
|
||||
<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 class="layui-nav-item">
|
||||
<a href="https://gitee.com/layui-vue">
|
||||
@ -52,9 +77,21 @@
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-nav-item">
|
||||
<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 type="rim" class="layui-local-badge" v-else @click="changeLocale('en_US')">英 文</lay-badge>
|
||||
<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
|
||||
type="rim"
|
||||
class="layui-local-badge"
|
||||
v-else
|
||||
@click="changeLocale('en_US')"
|
||||
>英 文</lay-badge
|
||||
>
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-nav-item">
|
||||
@ -72,26 +109,33 @@
|
||||
</lay-config-provider>
|
||||
</template>
|
||||
<script>
|
||||
import { ref, watch } from "vue";
|
||||
import { computed, ref, watch } from "vue";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
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 en_US from "../locales/en_US.ts";
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const { t } = useI18n();
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const locale = ref('zh_CN');
|
||||
const locale = ref("zh_CN");
|
||||
const currentPath = ref("/zh-CN/guide");
|
||||
const locales = [
|
||||
{name:'zh_CN',locale: zh_CN, merge: true},
|
||||
{name:'en_US',locale: en_US, merge: true},
|
||||
{ name: "zh_CN", locale: zh_CN, merge: true },
|
||||
{ name: "en_US", locale: en_US, merge: true },
|
||||
];
|
||||
|
||||
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 = [];
|
||||
|
||||
@ -101,17 +145,21 @@ export default {
|
||||
});
|
||||
});
|
||||
|
||||
watch(() => route.path, (val) => {
|
||||
watch(
|
||||
() => route.path,
|
||||
(val) => {
|
||||
currentPath.value = val;
|
||||
},{immediate: true, deep: true});
|
||||
},
|
||||
{ immediate: true, deep: true }
|
||||
);
|
||||
|
||||
const handleClick = function (menu) {
|
||||
router.push(menu.path);
|
||||
};
|
||||
|
||||
const changeLocale = function(lang) {
|
||||
const changeLocale = function (lang) {
|
||||
locale.value = lang;
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
t,
|
||||
@ -122,14 +170,13 @@ export default {
|
||||
currentPath,
|
||||
handleClick,
|
||||
changeLocale,
|
||||
themeVariable
|
||||
themeVariable,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.layui-layout-document > .layui-header {
|
||||
z-index: 9999;
|
||||
width: 100%;
|
||||
@ -168,13 +215,13 @@ export default {
|
||||
.layui-header .layui-local-badge {
|
||||
font-size: 12.4px;
|
||||
background: transparent;
|
||||
color:rgba(255, 255, 255, 0.7);
|
||||
border-color:rgba(255, 255, 255, 0.7);
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
border-color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.layui-header > .layui-local:hover {
|
||||
color:white;
|
||||
border-color:white;
|
||||
color: white;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
.layui-menu-docs {
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
@import "../../theme/variable.less";
|
||||
|
||||
.layui-color-picker {
|
||||
position: relative;
|
||||
user-select: none;
|
||||
width: 320px;
|
||||
background: #fff;
|
||||
padding: 10px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
/* 饱和度和亮度 */
|
||||
@ -106,6 +108,7 @@
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
display: block;
|
||||
border-radius: @global-border-radius;
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAWElEQVRIiWM8fubkfwYygKWJOSM5+mCAhRLNoxaPWjxq8ajFoxbTyeL/DAfJ0Xjs3Cl7Siwmu4Yht1aDgZEYx6MWj1o8avGoxaMWD3qLya5X//4nqx6HAQC7RBGFzolqTAAAAABJRU5ErkJggg==");
|
||||
background-size: 10px 10px;
|
||||
}
|
||||
|
||||
@ -101,7 +101,7 @@ import "./index.less";
|
||||
import LayDropdown from "../dropdown/index.vue";
|
||||
import { ref, computed, watch, onMounted } from "vue";
|
||||
|
||||
const emit = defineEmits(["update:color"]);
|
||||
const emit = defineEmits(["update:modelValue"]);
|
||||
|
||||
export interface LayColorPicker {
|
||||
modelValue?: any;
|
||||
@ -128,7 +128,6 @@ let value = ref(1);
|
||||
let red = ref(255);
|
||||
let green = ref(0);
|
||||
let blue = ref(0);
|
||||
|
||||
let alpha = ref(1);
|
||||
|
||||
onMounted(() => {
|
||||
@ -140,12 +139,11 @@ onMounted(() => {
|
||||
});
|
||||
|
||||
watch([red, green, blue], (newValue) => {
|
||||
emit("update:color", {
|
||||
r: red.value,
|
||||
g: green.value,
|
||||
b: blue.value,
|
||||
a: alpha.value,
|
||||
});
|
||||
|
||||
emit("update:modelValue", rgba2hex(red.value,
|
||||
green.value,
|
||||
blue.value,
|
||||
alpha.value));
|
||||
|
||||
let { h, s, v } = rgb2hsv(red.value, green.value, blue.value);
|
||||
|
||||
@ -160,12 +158,10 @@ watch([red, green, blue], (newValue) => {
|
||||
});
|
||||
|
||||
watch(alpha, () => {
|
||||
emit("update:color", {
|
||||
r: red.value,
|
||||
g: green.value,
|
||||
b: blue.value,
|
||||
a: alpha.value,
|
||||
});
|
||||
emit("update:modelValue", rgba2hex(red.value,
|
||||
green.value,
|
||||
blue.value,
|
||||
alpha.value));
|
||||
// 移动透明度滑块
|
||||
alphaSliderStyle.value = `left: ${
|
||||
alpha.value >= 1 ? "calc(100% - 6px)" : alpha.value * 100 + "%"
|
||||
@ -351,9 +347,7 @@ function parseColor(color: any) {
|
||||
let r, g, b, a;
|
||||
if (typeof color === "string") {
|
||||
if (
|
||||
/^#?([0-9a-fA-F]{6}|[0-9a-fA-F]{8}|[0-9a-fA-F]{3}|[0-9a-fA-F]{4})$/.test(
|
||||
color
|
||||
)
|
||||
/^#?([0-9a-fA-F]{6}|[0-9a-fA-F]{8}|[0-9a-fA-F]{3}|[0-9a-fA-F]{4})$/.test(color)
|
||||
) {
|
||||
return hex2rgba(color);
|
||||
}
|
||||
|
||||
@ -1925,23 +1925,18 @@ a cite {
|
||||
left: 0;
|
||||
z-index: 899;
|
||||
min-width: 100%;
|
||||
max-height: 360px;
|
||||
//max-height: 360px;
|
||||
overflow-y: auto;
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.layui-dropdown dl::before {
|
||||
content: " ";
|
||||
display: block;
|
||||
height: 4px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.layui-dropdown dl > .layui-dropdown-menu {
|
||||
border: 1px solid #eee;
|
||||
border-radius: @global-border-radius;
|
||||
}
|
||||
|
||||
.layui-dropdown-up dl {
|
||||
.layui-dropdown-up > dl {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@ -2619,11 +2614,9 @@ body .layui-util-face .layui-layer-content {
|
||||
}
|
||||
|
||||
.layui-colorpicker {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border: 1px solid #eee;
|
||||
padding: 5px;
|
||||
border-radius: 2px;
|
||||
border-radius: @global-border-radius;
|
||||
line-height: 24px;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
@ -2664,7 +2657,7 @@ body .layui-util-face .layui-layer-content {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
border-radius: 2px;
|
||||
border-radius: @global-border-radius;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user