标签导航显示切换

右边设置面板添加标签导航显示控制

效果切换后

2-1 store 中定义导航显示状态

src/store/modules/settings.ts

typescript

import { MutationTree, ActionTree } from 'vuex'
import variables from '@/styles/variables.scss'
import { IRootState } from '@/store'

export interface ISettingsState {
  theme: string;
  tagsView: boolean;
  originalStyle: string;
}

// 定义state
const state: ISettingsState = {
  theme: variables.theme,
  tagsView: true,
  originalStyle: ''
}

// 动态key的情况下 根据不同的key 约束对应value
// http://www.voidcn.com/article/p-wtmkdcie-byz.html
type ValueOf<T> = T[keyof T];
interface ISettings { // 约束payload类型
  key: keyof ISettingsState; // 约束为ISettingsState中key
  value: ValueOf<ISettingsState>; // 约束为ISettingsState中value的类型
}
// 定义mutations
const mutations: MutationTree<ISettingsState> = {
  CHANGE_SETTING(state, { key, value }: ISettings) {
    if (key in state) {
      (state[key] as ValueOf<ISettingsState>) = value
    }
  }
}

const actions: ActionTree<ISettingsState, IRootState> = {
  changeSetting({ commit }, data) {
    commit('CHANGE_SETTING', data)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

可以缓存到 sesstion storage 大家可以写下 sotre/index.ts 里添加下 settings.tagsView

2-2 修改 Settings 组件添加切换按钮

element.ts 中导入 el-switch 组件

修改 settings 组件

src/layout/components/Settings/index.vue

vue

<template>
  <div class="drawer-container">
    <div class="drawer-item">
      <span>主题色</span>
      <theme-picker />
    </div>

    <div class="drawer-item">
      <span>Open Tags-View</span>
      <el-switch v-model="tagsView" class="drawer-switch" />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue'
import ThemePicker from '@/components/ThemePicker/index.vue'
import { useStore } from '@/store'

export default defineComponent({
  name: 'Settings',
  components: {
    ThemePicker
  },
  setup() {
    const store = useStore()
    const tagsView = computed({
      get() {
        // 获取store中tagsView状态
        return store.state.settings.tagsView
      },
      set(val) {
        // switch修改后 派发action同步store中tagsview值
        store.dispatch('settings/changeSetting', {
          key: 'tagsView',
          value: val
        })
      }
    })

    return {
      tagsView
    }
  }
})
</script>

<style lang="scss" scoped>
  .drawer-container {
    padding: 24px;
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;

    .drawer-item {
      display: flex;
      justify-content: space-between;
      padding: 12px 0;
      font-size: 16px;
      color: rgba(0, 0, 0, .65);
    }
  }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

2-3 Layout 中添加条件控制

src/layout/index.vue

vue

<template>
  <div class="app-wrapper">
    <div class="sidebar-container">
      <Sidebar />
    </div>
    <div class="main-container">
      <div class="header">
        <navbar @showSetting="openSetting" />
        <!-- 控制tagsview显示 -->
        <tags-view v-if="showTagsView" />
      </div>
      <!-- AppMain router-view -->
      <app-main />
    </div>
    <right-panel
      v-model="showSetting"
      title="样式风格设置"
      :size="SettingsPanelWidth"
    >
      <settings />
    </right-panel>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue'
import Sidebar from './components/Sidebar/index.vue'
import AppMain from './components/AppMain.vue'
import Navbar from './components/Navbar.vue'
import TagsView from './components/TagsView/index.vue'
import RightPanel from '@/components/RightPanel/index.vue'
import Settings from './components/Settings/index.vue'
import varibalse from '@/styles/variables.scss'
import { useStore } from '@/store'

export default defineComponent({
  components: {
    Sidebar,
    AppMain,
    Navbar,
    TagsView,
    RightPanel,
    Settings
  },
  setup() {
    const store = useStore()
    const showSetting = ref(false)

    const openSetting = () => {
      showSetting.value = true
    }

    // 是否显示tagsview
    const showTagsView = computed(() => store.state.settings.tagsView)

    return {
      showSetting,
      openSetting,
      showTagsView,
      SettingsPanelWidth: varibalse.settingPanelWidth
    }
  }
})
</script>

<style lang="scss" scoped>
  .app-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    .main-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .app-main {
        /* 50= navbar  50  如果有tagsview + 34  */
        min-height: calc(100vh - 84px);
      }
    }
  }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

本节参考源码

https://gitee.com/brolly/vue3-element-admin/commit/fb6b3c91584137088844755d02c1222883d634af

标签导航显示切换 #

2-1 store 中定义导航显示状态 #

2-2 修改 Settings 组件添加切换按钮 #

element.ts 中导入 el-switch 组件 #

修改 settings 组件 #

2-3 Layout 中添加条件控制 #

本节参考源码 #