sizeSelect

hb_client/src/App.vue

@@ -1,11 +1,29 @@
 <template>
   <div id="app">
-    <router-view />
+    <router-view v-if='isRouterAlive'/>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'App'
+  name: 'App',
+  provide(){
+    return{
+      reload:this.reload
+    }
+  },
+  data(){
+    return{
+      isRouterAlive:true
+    }
+  },
+  methods:{
+    reload(){
+      this.isRouterAlive=false;
+      this.$nextTick(function () {
+        this.isRouterAlive=true;
+      })
+    },
+  }
 }
 </script>

hb_client/src/components/SizeSelect/index.vue

@@ -13,13 +13,14 @@
 
 <script>
 export default {
+  inject:['reload'],
   data() {
     return {
       sizeOptions: [
-        { label: 'Default', value: 'default' },
-        { label: 'Medium', value: 'medium' },
-        { label: 'Small', value: 'small' },
-        { label: 'Mini', value: 'mini' }
+        { label: '默认', value: 'default' },
+        { label: '大号', value: 'medium' },
+        { label: '中号', value: 'small' },
+        { label: '小号', value: 'mini' }
       ]
     }
   },
@@ -32,21 +33,20 @@ export default {
     handleSetSize(size) {
       this.$ELEMENT.size = size;
       this.$store.dispatch('app/setSize', size);
-      this.refreshView();
       this.$message({
         message: 'Switch Size Success',
         type: 'success'
-      })
+      });
+      this.reload();
     },
     refreshView() {
       // In order to make the cached page re-rendered
       this.$store.dispatch('tagsView/delAllCachedViews', this.$route);
-
-      const { fullPath } = this.$route
-
+      const { fullPath } = this.$route;
       this.$nextTick(() => {
+        location. reload();
         this.$router.replace({
-          path: '/redirect' + fullPath
+          path: fullPath
         })
       })
     }

hb_client/src/layout/components/Navbar.vue

@@ -7,9 +7,9 @@
     <div class="right-menu">
       <template>
         <search id="header-search" class="right-menu-item" />
-        <!--<el-tooltip content="Global Size" effect="dark" placement="bottom">-->
-          <!--<size-select id="size-select" class="right-menu-item hover-effect" />-->
-        <!--</el-tooltip>-->
+        <el-tooltip content="Global Size" effect="dark" placement="bottom">
+          <size-select id="size-select" class="right-menu-item hover-effect" />
+        </el-tooltip>
       </template>
       <div class="right-menu-item" >
           {{name}}
@@ -49,7 +49,7 @@
 import { mapGetters } from 'vuex'
 import Breadcrumb from '@/components/Breadcrumb'
 import Hamburger from '@/components/Hamburger'
-// import SizeSelect from '@/components/SizeSelect'
+import SizeSelect from '@/components/SizeSelect'
 import Search from '@/components/HeaderSearch'
 
 export default {
@@ -61,6 +61,7 @@ export default {
   components: {
     Breadcrumb,
     Hamburger,
+    SizeSelect,
     Search
   },
   computed: {

hb_client/src/main.js

@@ -1,8 +1,8 @@
 import Vue from 'vue'
-
+import Cookies from 'js-cookie'
 import 'normalize.css/normalize.css' // A modern alternative to CSS resets
 
-import ElementUI from 'element-ui'
+import Element from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 // import locale from 'element-ui/lib/locale/lang/en' // lang i18n
 
@@ -32,8 +32,11 @@ if (process.env.NODE_ENV === 'production') {
 // set ElementUI lang to EN
 // Vue.use(ElementUI, { locale })
 // 如果想要中文版 element-ui，按如下方式声明
-Vue.use(ElementUI, { size: 'medium' })
-Vue.config.productionTip = false
+// Vue.use(ElementUI, { size: 'medium' })
+Vue.use(Element, {
+  size: Cookies.get('size') || 'medium'
+})
+Vue.config.productionTip = false;
 
 
 new Vue({

hb_client/src/store/modules/app.js

@@ -5,7 +5,8 @@ const state = {
     opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
     withoutAnimation: false
   },
-  device: 'desktop'
+  device: 'desktop',
+  size: Cookies.get('size') || 'medium'
 }
 
 const mutations = {
@@ -25,6 +26,10 @@ const mutations = {
   },
   TOGGLE_DEVICE: (state, device) => {
     state.device = device
+  },
+  SET_SIZE: (state, size) => {
+    state.size = size
+    Cookies.set('size', size)
   }
 }
 
@@ -37,6 +42,9 @@ const actions = {
   },
   toggleDevice({ commit }, device) {
     commit('TOGGLE_DEVICE', device)
+  },
+  setSize({ commit }, size) {
+    commit('SET_SIZE', size)
   }
 }