| 若依前端Vue3模板 | 您所在的位置：网站首页 › qq怎么免费自定义主题 › 若依前端Vue3模板 |
若依前端Vue3模板
|
文章目录
若依框架新增自定义主题风格实现结果实现步骤默认主题的设置布局设置图标文件布局组件
准备CSS变量对状态管理库中的主题名称进行匹配logo图标组件左侧导航栏菜单组件顶部导航栏组件
炫彩主题实现结果实现步骤布局设置布局组件
其他展示内容的路由出口布局设置-开启topNav后，顶部展示的组件打开页面切换的TagesViews
若依框架新增自定义主题风格
实现结果
文件位置：src/settings.js export default { // ... /** * 侧边栏主题 深色主题theme-dark，浅色主题theme-light，蓝色主题theme-blue，炫彩主题theme-shine */ sideTheme: 'theme-blue', // ... } 布局设置
文件位置：src/assets/images/blue.svg 复制同级的 light.svg 修改名称即可，将两个颜色替换为：#409eff 布局组件文件位置：src/layout/components/Settings/index.vue template模板中添加控件如下 新增一个主题风格选项，主要注意的是handleTheme里面的传参（后面会用到）和img的src图片，例如实例中的blue.svg 准备CSS变量文件位置：src/assets/styles/variables.module.scss // 默认菜单主题风格 $base-menu-blue-color: rgba(0, 0, 0, 0.7); $base-menu-blue-background: #ffffff; $base-logo-blue-title-color: #ffffff; $base-menu-shine-color: #ffffff; $base-menu-shine-background: rgba(0, 0, 0, 0); $base-logo-shine-title-color: #ffffff; // ... // 顶部菜单主题风格 $base-navbar-color: #999093; $base-navbar-icon-color: #5a5e66; $base-navbar-background: #ffffff; $base-navbar-blue-color: #ffffff; $base-navbar-blue-background: #409eff; $base-navbar-shine-color: #ffffff; $base-navbar-shine-background: rgba(0, 0, 0, 0); // ... :export { menuBlueColor: $base-menu-blue-color; menuBlueBackground: $base-menu-blue-background; logoBlueTitleColor: $base-logo-blue-title-color; menuShineColor: $base-menu-shine-color; menuShineBackground: $base-menu-shine-background; logoShineTitleColor: $base-logo-shine-title-color; navbarColor: $base-navbar-color; navbarIconColor: $base-navbar-icon-color; navbarBlueColor: $base-navbar-blue-color; navbarShineColor: $base-navbar-shine-color; navbarBackground: $base-navbar-background; navbarBlueBackground: $base-navbar-blue-background; navbarShineBackground: $base-navbar-shine-background; // ... }同级文件：sidebar.scss 左侧menu菜单的背景色和悬停样式 //新增样式，大概在112行 & .theme-blue .nest-menu .el-sub-menu > .el-sub-menu__title, & .theme-blue .el-sub-menu .el-menu-item { background-color: $base-menu-blue-background !important; &:hover { color: $base-navbar-blue-color; background-color: $base-navbar-blue-background !important; } } 对状态管理库中的主题名称进行匹配JS核心内容如下，若没有需手动添加。 import variables from '@/assets/styles/variables.module.scss' import useSettingsStore from '@/store/modules/settings' const settingsStore = useSettingsStore(); const sideTheme = computed(() => settingsStore.sideTheme); logo图标组件文件位置：src/layout/components/Sidebar/Logo.vue 主要修改几个动态的style {{ title }} {{ title }} 左侧导航栏菜单组件文件位置：src/layout/components/Sidebar/index.vue 样式文件专门对该组件进行了修改：src/assets/styles/sidebar.scss，若对侧边栏进行修改实现不了时，可查看是否是这里的问题，里面用了好多!important定义样式。 顶部导航栏组件文件位置：src/layout/components/Navbar.vue 添加了一个动态style， 头像右边的el-icon组件，添加了color属性 该文件下没有使用过主题名称匹配，需手动引入 该组件还引用了一些子组件，都需要对主题名称进行匹配 针对组件中使用到的svg-icon图标组件，修改如下： 组件都在src/components目录下，以文档地址图标为例，其他类似。 import variables from '@/assets/styles/variables.module.scss' import useSettingsStore from '@/store/modules/settings' const settingsStore = useSettingsStore(); const sideTheme = computed(() => settingsStore.sideTheme); // ...控制左侧菜单栏收起展开的icon图标 文件位置：src/components/Hamburger/index.vue 给 svg 图标添加 fill 属性。 |
【本文地址】
| 今日新闻 |
| 推荐新闻 |
| 专题文章 |