若依框架新增自定義主題風(fēng)格

實(shí)現(xiàn)結(jié)果

實(shí)現(xiàn)步驟

默認(rèn)主題的設(shè)置

文件位置：src/settings.js

export default {
  // ...
  /**
   * 側(cè)邊欄主題 深色主題theme-dark，淺色主題theme-light，藍(lán)色主題theme-blue，炫彩主題theme-shine
   */
  sideTheme: 'theme-blue',
  // ...
}

布局設(shè)置

圖標(biāo)文件

文件位置：src/assets/images/blue.svg

復(fù)制同級(jí)的 light.svg 修改名稱(chēng)即可，將兩個(gè)顏色替換為：#409eff

<g id="配置面板" width="48" height="40" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g id="setting-copy-2" width="48" height="40" transform="translate(-1190.000000, -136.000000)">
        <g id="Group-8" width="48" height="40" transform="translate(1167.000000, 0.000000)">
            <g id="Group-5-Copy-5" filter="url(#filter-1)" transform="translate(25.000000, 137.000000)">
                <mask id="mask-3" fill="#409eff">
                    <use xlink:href="#path-2"></use>
                </mask>
                <g id="Rectangle-18">
                    <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
                    <use fill="#F0F2F5" fill-rule="evenodd" xlink:href="#path-2"></use>
                </g>
                <rect id="Rectangle-11" fill="#409eff" mask="url(#mask-3)" x="0" y="0" width="48" height="10"></rect>
                <rect id="Rectangle-18" fill="#FFFFFF" mask="url(#mask-3)" x="0" y="0" width="16" height="40"></rect>
            </g>
        </g>
    </g>
</g>

布局組件

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

template模板中添加控件如下

新增一個(gè)主題風(fēng)格選項(xiàng)，主要注意的是handleTheme里面的傳參（后面會(huì)用到）和img的src圖片，例如實(shí)例中的blue.svg

<div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-blue')">
  <img src="@/assets/images/blue.svg" alt="blue" />
  <div v-if="sideTheme === 'theme-blue'" class="setting-drawer-block-checbox-selectIcon" style="display: block;">
    <i aria-label="圖標(biāo): check" class="anticon anticon-check">
      <svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme" aria-hidden="true"
        focusable="false" class>
        <path
          d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z" />
      </svg>
    </i>
  </div>
</div>

準(zhǔn)備CSS變量

文件位置：src/assets/styles/variables.module.scss

// 默認(rèn)菜單主題風(fēng)格
$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;

// ...

// 頂部菜單主題風(fēng)格
$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;
    // ...
}

同級(jí)文件：sidebar.scss

左側(cè)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;
  }
}

對(duì)狀態(tài)管理庫(kù)中的主題名稱(chēng)進(jìn)行匹配

JS核心內(nèi)容如下，若沒(méi)有需手動(dòng)添加。

import variables from '@/assets/styles/variables.module.scss'
import useSettingsStore from '@/store/modules/settings'

const settingsStore = useSettingsStore();
const sideTheme = computed(() => settingsStore.sideTheme);

logo圖標(biāo)組件

文件位置：src/layout/components/Sidebar/Logo.vue

主要修改幾個(gè)動(dòng)態(tài)的style

<template>
  <div class="sidebar-logo-container" :class="{ 'collapse': collapse }"
    :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : sideTheme === 'theme-blue' ? variables.navbarBlueBackground : variables.menuLightBackground }">
    <transition name="sidebarLogoFade">
      <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
        <img v-if="logo" :src="logo" class="sidebar-logo" />
        <h1 v-else class="sidebar-title"
          :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : sideTheme === 'theme-blue' ? variables.logoBlueTitleColor : variables.logoLightTitleColor }">
          {{ title }}</h1>
      </router-link>
      <router-link v-else key="expand" class="sidebar-logo-link" to="/">
        <img v-if="logo" :src="logo" class="sidebar-logo" />
        <h1 class="sidebar-title"
          :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : sideTheme === 'theme-blue' ? variables.logoBlueTitleColor : variables.logoLightTitleColor }">
          {{ title }}</h1>
      </router-link>
    </transition>
  </div>
</template>

左側(cè)導(dǎo)航欄菜單組件

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

<template>
  <div :class="{ 'has-logo': showLogo }"
    :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : sideTheme === 'theme-blue' ? variables.menuBlueBackground : variables.menuLightBackground }">
    <logo v-if="showLogo" :collapse="isCollapse" />
    <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
      <el-menu :default-active="activeMenu" :collapse="isCollapse"
        :background-color="sideTheme === 'theme-dark' ? variables.menuBackground : sideTheme === 'theme-blue' ? variables.menuBlueBackground : variables.menuLightBackground"
        :text-color="sideTheme === 'theme-dark' ? variables.menuColor : sideTheme === 'theme-blue' ? variables.menuBlueColor : variables.menuLightColor"
        :unique-opened="true" :active-text-color="theme" :collapse-transition="false" mode="vertical">
        <sidebar-item v-for="(route, index) in sidebarRouters" :key="route.path + index" :item="route"
          :base-path="route.path" />
      </el-menu>
    </el-scrollbar>
  </div>
</template>

樣式文件專(zhuān)門(mén)對(duì)該組件進(jìn)行了修改：src/assets/styles/sidebar.scss，若對(duì)側(cè)邊欄進(jìn)行修改實(shí)現(xiàn)不了時(shí)，可查看是否是這里的問(wèn)題，里面用了好多!important定義樣式。

頂部導(dǎo)航欄組件

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

添加了一個(gè)動(dòng)態(tài)style，

頭像右邊的el-icon組件，添加了color屬性

<template>
  <div class="navbar"
    :style="{ backgroundColor: sideTheme === 'theme-dark' || sideTheme === 'theme-light' ? variables.navbarBackground : variables.navbarBlueBackground }">
	<!-- ... -->
        <div class="avatar-container">
        <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
          <div class="avatar-wrapper">
            <img :src="userStore.avatar" class="user-avatar" />
            <el-icon
              :color="sideTheme === 'theme-dark' || sideTheme === 'theme-light' ? variables.navbarIconColor : variables.navbarBlueColor"><caret-bottom /></el-icon>
          </div>
          <!-- ... -->
        </el-dropdown>
      </div>
  </div>
</template>

該文件下沒(méi)有使用過(guò)主題名稱(chēng)匹配，需手動(dòng)引入

該組件還引用了一些子組件，都需要對(duì)主題名稱(chēng)進(jìn)行匹配

針對(duì)組件中使用到的svg-icon圖標(biāo)組件，修改如下：

組件都在src/components目錄下，以文檔地址圖標(biāo)為例，其他類(lèi)似。

<template>
  <div>
    <svg-icon icon-class="question" @click="goto"
      :color="sideTheme === 'theme-dark' || sideTheme === 'theme-light' ? variables.navbarIconColor : variables.navbarBlueColor" />
  </div>
</template>

<script setup>
import variables from '@/assets/styles/variables.module.scss'
import useSettingsStore from '@/store/modules/settings'

const settingsStore = useSettingsStore();
const sideTheme = computed(() => settingsStore.sideTheme);
// ...
</script>

控制左側(cè)菜單欄收起展開(kāi)的icon圖標(biāo)

文件位置：src/components/Hamburger/index.vue

給 svg 圖標(biāo)添加 fill 屬性。

<template>
  <div style="padding: 0 15px;" @click="toggleClick">
    <svg
      :class="{'is-active':isActive}"
      :fill="sideTheme === 'theme-dark' || sideTheme === 'theme-light' ? variables.navbarIconColor : variables.navbarBlueColor"
      class="hamburger"
      viewBox="0 0 1024 1024"
      xmlns="http://www.w3.org/2000/svg"
      width="64"
      height="64"
    >
      <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
    </svg>
  </div>
</template>

<script setup>
import variables from '@/assets/styles/variables.module.scss'
import useSettingsStore from '@/store/modules/settings'

const settingsStore = useSettingsStore();
const sideTheme = computed(() => settingsStore.sideTheme);
// ...
</script>

最后，是對(duì)面包屑導(dǎo)航的處理

對(duì)span標(biāo)簽 a標(biāo)簽，添加動(dòng)態(tài)style

<template>
  <el-breadcrumb class="app-breadcrumb" separator="/">
    <transition-group name="breadcrumb">
      <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
        <span
          :style="{ color: sideTheme === 'theme-dark' || sideTheme === 'theme-light' ? variables.navbarColor : variables.navbarBlueColor }"
          v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">
          {{ item.meta.title }}</span>
        <a :style="{ color: sideTheme === 'theme-dark' || sideTheme === 'theme-light' ? variables.navbarColor : variables.navbarBlueColor }"
          v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
      </el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>
</template>
<script setup>
import variables from '@/assets/styles/variables.module.scss'
import useSettingsStore from '@/store/modules/settings'

const settingsStore = useSettingsStore();
const sideTheme = computed(() => settingsStore.sideTheme);
// ...
</script>

炫彩主題

炫彩主題與自定義主題方法類(lèi)似。只是將他們的背景色去掉。

這里提供一種添加炫彩主題的思路

實(shí)現(xiàn)結(jié)果

實(shí)現(xiàn)步驟

布局設(shè)置

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

布局組件

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

為了樣式美觀，給img標(biāo)簽添加了style屬性，svg圖標(biāo)填充顏色設(shè)為白色：fill='#ffffff'

<div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-shine')">
  <img src="@/assets/images/theme-bg.jpg" alt="shine" style="width: 48px; height: 40px;" />
  <div v-if="sideTheme === 'theme-shine'" class="setting-drawer-block-checbox-selectIcon" style="display: block;">
    <i aria-label="圖標(biāo): check" class="anticon anticon-check">
      <svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" fill="#ffffff" aria-hidden="true"
        focusable="false" class>
        <path
          d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z" />
      </svg>
    </i>
  </div>
</div>

炫彩主題需要背景色透明，不能實(shí)現(xiàn)固定header

<div class="drawer-item">
  <span>固定 Header</span>
  <span class="comp-style">
    <!-- 炫彩主題需要背景色透明，不能實(shí)現(xiàn)固定header -->
    <el-switch v-model="fixedHeader" class="drawer-switch" :disabled="sideTheme === 'theme-shine'" />
  </span>
</div>

核心代碼：

頁(yè)面加載時(shí)向body元素中插入一個(gè)img元素，切換主題時(shí)控制img元素的顯示/隱藏。

handleTheme()是主題切換時(shí)觸發(fā)的函數(shù)。

import exampleImg from '@/assets/images/theme-bg.jpg'

// ...
// 在body下插入一個(gè)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';
// 獲取當(dāng)前主題名稱(chēng)，若當(dāng)不是炫彩主題，將其隱藏
if (settingsStore.sideTheme !== 'theme-shine') {
  img.style.display = 'none';
}
body.appendChild(img);
function handleTheme(val) {
  // 選中炫彩主題，并且背景圖為隱藏狀態(tài)
  if (val == 'theme-shine' && img.style.display == 'none') {
    img.style.display = 'inline-block';
    // 炫彩主題需要背景色透明，不能實(shí)現(xiàn)固定header
    fixedHeader.value = false;
  } else {
    img.style.display = 'none';
  }
  settingsStore.changeSetting({ key: 'sideTheme', value: val })
  sideTheme.value = val;
}
// ...

其他

剩下的修改的地方與上面類(lèi)似。

下面是炫彩主題特有的：

展示內(nèi)容的路由出口

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

添加動(dòng)態(tài)style屬性

樣式修改如下：主要是讓.app-main控件看著更舒服

<template>
  <section class="app-main" :style="{ opacity: sideTheme === 'theme-shine' ? 0.9 : 1 }">
    <!-- ... -->
  </section>
</template>

<script setup>
import useSettingsStore from '@/store/modules/settings'

const settingsStore = useSettingsStore();
const sideTheme = computed(() => settingsStore.sideTheme);
</script>

<style lang="scss" scoped>
.app-main {
  border-radius: 5px;
  margin: 5px;
  background-color: rgba(255, 255, 255, 1);
  /* 50= navbar  50  */
  // min-height: calc(100vh - 50px);
  // width: 100%;
  position: relative;
  overflow: hidden;
}

.fixed-header+.app-main {
  padding-top: 50px;
}

.hasTagsView {
  .app-main {
    /* 84 = navbar + tags-view = 50 + 34 */
    // min-height: calc(100vh - 84px);
  }

  .fixed-header+.app-main {
    padding-top: 84px;
  }
}
</style>

布局設(shè)置-開(kāi)啟topNav后，頂部展示的組件

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

添加兩個(gè)動(dòng)態(tài):background-color屬性

（這里改的比較粗糙，用到的時(shí)候再詳細(xì)修改）

<template>
  <el-menu
    :background-color="sideTheme === 'theme-shine' ? ' variables.navbarShineBackground' : variables.navbarBackground"
    :default-active="activeMenu" mode="horizontal" @select="handleSelect" :ellipsis="false">
    <!-- ... -->

    <!-- 頂部菜單超出數(shù)量折疊 -->
    <el-sub-menu
      :background-color="sideTheme === 'theme-shine' ? ' variables.navbarShineBackground' : variables.navbarBackground"
      :style="{ '--theme': theme }" index="more" v-if="topMenus.length > visibleNumber">
      <template #title>更多菜單</template>
      <!-- ... -->
    </el-sub-menu>
  </el-menu>
</template>

打開(kāi)頁(yè)面切換的TagesViews

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

添加動(dòng)態(tài)style屬性。

<template>
  <div :style="{ background: sideTheme === 'theme-shine' ? variables.navbarShineBackground : variables.navbarBackground }"
    id="tags-view-container" class="tags-view-container">
    <!-- ... -->
  </div>
</template>

補(bǔ)充非顯示頁(yè)面的標(biāo)簽樣式

// ...
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
  };
}

好了，圓滿(mǎn)結(jié)束。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-627960.html

到了這里，關(guān)于若依前端Vue3模板——自定義主題+炫彩主題的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！