Layui - Vue简单介绍主题色

Layui Vue基本使用

创建 variable.css 样式文件, 覆盖 layui-vue 的 Css3 变量。

--global-primary-color: #009688; // 主色

--global-checked-color: #5fb878; // 次色

Layui Vue高级使用

通过 config-provider 标签, 配合 reactive 变量, 实现动态主题。

<template>
    <lay-button @click="changeThemeVariable">Update Theme</lay-button>
    <lay-config-provider :themeVariable="themeVariable">
        <App />
    </lay-config-provider>
</template>

<script setup>
import { reactive } from "vue";

const themeVariable = reactive({ 
    "--global-primary-color":"red",
    "--global-checked-color":"red"
})

const changeThemeVariable = () => {
    themeVariable['--global-primary-color'] = "green";
    themeVariable['--global-checked-color'] = "green";
}
</script>

Css Variable

以下是一些最常用的通用变量，所有 Css3 变量可以在 这里 找到。

--global-primary-color: #009688; // 主色

--global-checked-color: #5fb878; // 次色

--global-border-radius: 2px; // 圆角度

--global-normal-color: #1e9fff; // 通用色

--global-warm-color: #ffb800; // 警告色

--global-danger-color: #ff5722; // 危险色

进入Layui Vue主题中文文档