2024年06月16日 建站教程
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; // 危险色
本文链接：http://so.lmcjl.com/news/6652/