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主题中文文档

推荐9款支持 Vue3 免费开源的前端 UI 组件库

基于Vite/TypeScript/Vue3/ElementPlus+TinkPHP6前后端一体框架——Niucloud Admin

免费开源企业级前端 UI 组件库——TinyVue

免费开源的 Vue 3 桌面端 UI 组件库——Layui Vue

Layui - Vue如何设置默认语言

标签： Layui Vue, Layui主题色, Vue3免费开源组件, Vue3组件库, 桌面端UI组件库

上面是“Layui - Vue简单介绍主题色”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_13025.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！