| | |
|---|
| | | <template> |
|---|
| | | <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}"> |
|---|
| | | <div :class="classObj" class="app-wrapper"> |
|---|
| | | <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/> |
|---|
| | | <sidebar class="sidebar-container"/> |
|---|
| | | <div :class="{hasTagsView:needTagsView}" class="main-container"> |
|---|
| | |
|---|
| | | import ResizeMixin from './mixin/ResizeHandler' |
|---|
| | | import { mapState } from 'vuex' |
|---|
| | | import variables from '@/assets/styles/variables.scss' |
|---|
| | | import { applyTheme, setStoredTheme } from '@/utils/theme' |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | name: 'Layout', |
|---|
| | |
|---|
| | | return variables; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | // 进入 Layout 时应用当前主题色（并记住选择） |
|---|
| | | this.applyCurrentTheme() |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | theme(val) { |
|---|
| | | this.applyCurrentTheme() |
|---|
| | | setStoredTheme(val) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | applyCurrentTheme() { |
|---|
| | | applyTheme(this.theme) |
|---|
| | | }, |
|---|
| | | handleClickOutside() { |
|---|
| | | this.$store.dispatch('app/closeSideBar', { withoutAnimation: false }) |
|---|
| | | } |
|---|
