tagview & sidebar 主题颜色与element ui(全局)同步

RuoYi

2020-06-04 bb565f87cf1721ef02e6266f4cbeb7d68abd194a

tagview & sidebar 主题颜色与element ui(全局)同步

 ruoyi-ui/src/layout/components/Sidebar/index.vue

@@ -1,54 +1,57 @@
<template>

  <div :class="{'has-logo':showLogo}">

    <logo v-if="showLogo" :collapse="isCollapse" />

    <el-scrollbar wrap-class="scrollbar-wrapper">

      <el-menu

        :default-active="activeMenu"

        :collapse="isCollapse"

        :background-color="variables.menuBg"

        :text-color="variables.menuText"

        :unique-opened="true"

        :active-text-color="variables.menuActiveText"

        :collapse-transition="false"

        mode="vertical"

      >

        <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />

      </el-menu>

    </el-scrollbar>

  </div>

    <div :class="{'has-logo':showLogo}">

        <logo v-if="showLogo" :collapse="isCollapse" />

        <el-scrollbar wrap-class="scrollbar-wrapper">

            <el-menu

                :default-active="activeMenu"

                :collapse="isCollapse"

                :background-color="variables.menuBg"

                :text-color="variables.menuText"

                :unique-opened="true"

                :active-text-color="settings.theme"

                :collapse-transition="false"

                mode="vertical"

            >

                <sidebar-item

                    v-for="(route, index) in permission_routes"

                    :key="route.path  + index"

                    :item="route"

                    :base-path="route.path"

                />

            </el-menu>

        </el-scrollbar>

    </div>

</template>



<script>

import { mapGetters } from 'vuex'

import Logo from './Logo'

import SidebarItem from './SidebarItem'

import variables from '@/assets/styles/variables.scss'

import { mapGetters, mapState } from "vuex";

import Logo from "./Logo";

import SidebarItem from "./SidebarItem";

import variables from "@/assets/styles/variables.scss";



export default {

  components: { SidebarItem, Logo },

  computed: {

    ...mapGetters([

      'permission_routes',

      'sidebar'

    ]),

    activeMenu() {

      const route = this.$route

      const { meta, path } = route

      // if set path, the sidebar will highlight the path you set

      if (meta.activeMenu) {

        return meta.activeMenu

      }

      return path

    },

    showLogo() {

      return this.$store.state.settings.sidebarLogo

    },

    variables() {

      return variables

    },

    isCollapse() {

      return !this.sidebar.opened

    components: { SidebarItem, Logo },

    computed: {

        ...mapState(["settings"]),

        ...mapGetters(["permission_routes", "sidebar"]),

        activeMenu() {

            const route = this.$route;

            const { meta, path } = route;

            // if set path, the sidebar will highlight the path you set

            if (meta.activeMenu) {

                return meta.activeMenu;

            }

            return path;

        },

        showLogo() {

            return this.$store.state.settings.sidebarLogo;

        },

        variables() {

            return variables;

        },

        isCollapse() {

            return !this.sidebar.opened;

        }

    }

  }

}

};

</script>


 ruoyi-ui/src/layout/components/TagsView/index.vue

@@ -1,6 +1,6 @@
<template>

  <div id="tags-view-container" class="tags-view-container">

    <scroll-pane ref="scrollPane" class="tags-view-wrapper">

    <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">

      <router-link

        v-for="tag in visitedViews"

        ref="tag"

@@ -9,6 +9,7 @@
        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"

        tag="span"

        class="tags-view-item"

        :style="activeStyle(tag)"

        @click.middle.native="!isAffix(tag)?closeSelectedTag(tag):''"

        @contextmenu.prevent.native="openMenu(tag,$event)"

      >

@@ -46,6 +47,9 @@
    },

    routes() {

      return this.$store.state.permission.routes

    },

    theme() {

      return this.$store.state.settings.theme;

    }

  },

  watch: {

@@ -68,6 +72,13 @@
  methods: {

    isActive(route) {

      return route.path === this.$route.path

    },

    activeStyle(tag) {

      if (!this.isActive(tag)) return {};

      return {

        "background-color": this.theme,

        "border-color": this.theme

      };

    },

    isAffix(tag) {

      return tag.meta && tag.meta.affix

@@ -189,6 +200,9 @@
    },

    closeMenu() {

      this.visible = false

    },

    handleScroll() {

      this.closeMenu()

    }

  }

}