Commit 1bc60d16 by Elune

优化主题在页面刷新后重置的问题

parent 5061010a
<template> <template>
<el-color-picker <el-color-picker
v-model="theme" v-model="theme"
:predefine="['#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]" :predefine="['#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d']"
class="theme-picker" class="theme-picker"
popper-class="theme-picker-dropdown" popper-class="theme-picker-dropdown"
/> />
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<script> <script>
const version = require('element-ui/package.json').version // element-ui version from node_modules const version = require('element-ui/package.json').version // element-ui version from node_modules
const ORIGINAL_THEME = '#409EFF' // default color const ORIGINAL_THEME = '#409EFF' // default color
import Cookies from 'js-cookie'
export default { export default {
data() { data() {
return { return {
...@@ -31,7 +31,8 @@ export default { ...@@ -31,7 +31,8 @@ export default {
immediate: true immediate: true
}, },
async theme(val) { async theme(val) {
const oldVal = this.chalk ? this.theme : ORIGINAL_THEME Cookies.set('theme', val, { expires: 365 })
const oldVal = this.chalk ? this.theme : Cookies.get('theme') ? Cookies.get('theme') : ORIGINAL_THEME
if (typeof val !== 'string') return if (typeof val !== 'string') return
const themeCluster = this.getThemeCluster(val.replace('#', '')) const themeCluster = this.getThemeCluster(val.replace('#', ''))
const originalCluster = this.getThemeCluster(oldVal.replace('#', '')) const originalCluster = this.getThemeCluster(oldVal.replace('#', ''))
......
...@@ -12,6 +12,8 @@ ...@@ -12,6 +12,8 @@
<settings /> <settings />
</right-panel> </right-panel>
</div> </div>
<!-- 防止刷新后主题丢失 -->
<Theme v-show="false" ref="theme" />
</div> </div>
</template> </template>
...@@ -20,7 +22,8 @@ import RightPanel from '@/components/RightPanel' ...@@ -20,7 +22,8 @@ import RightPanel from '@/components/RightPanel'
import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components' import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
import ResizeMixin from './mixin/ResizeHandler' import ResizeMixin from './mixin/ResizeHandler'
import { mapState } from 'vuex' import { mapState } from 'vuex'
import Theme from '@/components/ThemePicker'
import Cookies from 'js-cookie'
export default { export default {
name: 'Layout', name: 'Layout',
components: { components: {
...@@ -29,7 +32,8 @@ export default { ...@@ -29,7 +32,8 @@ export default {
RightPanel, RightPanel,
Settings, Settings,
Sidebar, Sidebar,
TagsView TagsView,
Theme
}, },
mixins: [ResizeMixin], mixins: [ResizeMixin],
computed: { computed: {
...@@ -49,6 +53,15 @@ export default { ...@@ -49,6 +53,15 @@ export default {
} }
} }
}, },
mounted() {
if (Cookies.get('theme')) {
this.$refs.theme.theme = Cookies.get('theme')
this.$store.dispatch('settings/changeSetting', {
key: 'theme',
value: Cookies.get('theme')
})
}
},
methods: { methods: {
handleClickOutside() { handleClickOutside() {
this.$store.dispatch('app/closeSideBar', { withoutAnimation: false }) this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
......
import variables from '@/assets/styles/element-variables.scss' import variables from '@/assets/styles/element-variables.scss'
import defaultSettings from '@/settings' import defaultSettings from '@/settings'
const { tagsView, fixedHeader, sidebarLogo, uniqueOpened, showFooter, footerTxt, caseNumber } = defaultSettings const { tagsView, fixedHeader, sidebarLogo, uniqueOpened, showFooter, footerTxt, caseNumber } = defaultSettings
const state = { const state = {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment