索取营销诊断书
QQ
    您的位置：上海毫米网络优化公司 > 网站优化分享 >
    相关推荐recommended
    若依前端Vue3模板——自定义主题+炫彩主题
    作者：mmseoamin日期：2023-12-02

    文章目录

      • 若依框架新增自定义主题风格
        • 实现结果
        • 实现步骤
          • 默认主题的设置
          • 布局设置
            • 图标文件
            • 布局组件
            • 准备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

                        
  blue
                        准备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
                        左侧导航栏菜单组件

                        文件位置：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目录下，以文档地址图标为例，其他类似。

                        最后，是对面包屑导航的处理

                        对span标签 a标签，添加动态style

                        炫彩主题

                        炫彩主题与自定义主题方法类似。只是将他们的背景色去掉。

                        这里提供一种添加炫彩主题的思路

                        实现结果

                        在这里插入图片描述

                        实现步骤

                        布局设置

                        找一张图片，放入位置：src/assets/images/theme-bg.jpg

                        布局组件

                        文件位置：src/layout/components/Settings/index.vue

                        为了样式美观，给img标签添加了style属性，svg图标填充颜色设为白色：fill='#ffffff'

                        
  shine

                        炫彩主题需要背景色透明，不能实现固定header

                        
  固定 Header

                        核心代码：

                        页面加载时向body元素中插入一个img元素，切换主题时控制img元素的显示/隐藏。

                        handleTheme()是主题切换时触发的函数。

                        import exampleImg from 'https://blog.csdn.net/qq_51532249/article/details/@/assets/images/theme-bg.jpg'
// ...
// 在body下插入一个img元素，作为炫彩主题的背景
const body = document.querySelector('body');
const img = document.createElement('img');
img.setAttribute('src', exampleImg);
img.style.minWidth = '100%';
img.style.minHeight = '100%';
img.style.position = 'fixed';
img.style.left = '0';
img.style.top = '0';
img.style.zIndex = '-1';
// 获取当前主题名称，若当不是炫彩主题，将其隐藏
if (settingsStore.sideTheme !== 'theme-shine') {
  img.style.display = 'none';
}
body.appendChild(img);
function handleTheme(val) {
  // 选中炫彩主题，并且背景图为隐藏状态
  if (val == 'theme-shine' && img.style.display == 'none') {
    img.style.display = 'inline-block';
    // 炫彩主题需要背景色透明，不能实现固定header
    fixedHeader.value = false;
  } else {
    img.style.display = 'none';
  }
  settingsStore.changeSetting({ key: 'sideTheme', value: val })
  sideTheme.value = val;
}
// ...
                        其他

                        剩下的修改的地方与上面类似。

                        下面是炫彩主题特有的：

                        展示内容的路由出口

                        文件位置：src/layout/components/AppMain.vue

                        添加动态style属性

                        样式修改如下：主要是让.app-main控件看着更舒服
                        布局设置-开启topNav后，顶部展示的组件

                        组件位置：src/components/TopNav/index.vue

                        添加两个动态:background-color属性

                        （这里改的比较粗糙，用到的时候再详细修改）
                        打开页面切换的TagesViews

                        文件位置：src/layout/components/TagsView/index.vue

                        添加动态style属性。

                        补充非显示页面的标签样式

                        // ...
import variables from '@/assets/styles/variables.module.scss'
const settingsStore = useSettingsStore();
const sideTheme = computed(() => settingsStore.sideTheme);
// ...
function activeStyle(tag) {
  if (!isActive(tag)) return {
    'color': sideTheme.value === 'theme-shine' ? variables.navbarShineColor : '',
    'background-color': sideTheme.value === 'theme-shine' ? variables.navbarShineBackground : ''
  };
  return {
    "background-color": theme.value,
    "border-color": theme.value
  };
}

                        好了，圆满结束。

    上一篇：jQuery-选择器

    下一篇：微信小程序获取用户手机号码教程（前端+后端）

    关注我们
    扫描二维码
    获取更多信息
    精彩一手掌握