14 changed files with 223 additions and 107 deletions
			
			
		@ -0,0 +1,22 @@ | 
				
			|||
const state = { | 
				
			|||
  recentPages: [] | 
				
			|||
  } | 
				
			|||
   | 
				
			|||
  const mutations = { | 
				
			|||
 | 
				
			|||
    addRecent(state, item) { | 
				
			|||
      if (state.recentPages.find(unit => unit.path == item.path)) return; | 
				
			|||
      state.recentPages.push(item); | 
				
			|||
    }, | 
				
			|||
    removeRecent(state, item) { | 
				
			|||
      let i = state.recentPages.findIndex(unit => unit.path == item.path); | 
				
			|||
      state.recentPages.splice(i, 1); | 
				
			|||
    } | 
				
			|||
 | 
				
			|||
  } | 
				
			|||
   | 
				
			|||
  export default { | 
				
			|||
    namespaced: true, | 
				
			|||
    state, | 
				
			|||
    mutations, | 
				
			|||
  } | 
				
			|||
@ -0,0 +1,89 @@ | 
				
			|||
<template> | 
				
			|||
<div class="recent_pages"> | 
				
			|||
    <h4>最近使用:</h4> | 
				
			|||
    <div class="history_buttons"> | 
				
			|||
        <div class="unit" :class="isActive(item) ? 'active' : ''" v-for="item in recentPages"> | 
				
			|||
            <p class="btn_main" @click="onClickItem(item)" :key="item.path">{{ | 
				
			|||
                item.title | 
				
			|||
            }}</p> | 
				
			|||
            <p class="btn_close" @click="onRemoveItem(item)">x</p> | 
				
			|||
        </div> | 
				
			|||
    </div> | 
				
			|||
</div> | 
				
			|||
</template> | 
				
			|||
<script> | 
				
			|||
import { mapMutations, mapState } from 'vuex'; | 
				
			|||
export default{ | 
				
			|||
    data(){ | 
				
			|||
        return {} | 
				
			|||
    }, | 
				
			|||
    computed:{ | 
				
			|||
        ...mapState("menu", ["recentPages"]) | 
				
			|||
    }, | 
				
			|||
    watch:{ | 
				
			|||
        $route:{ | 
				
			|||
            handler(newV){ | 
				
			|||
                this.addRecent({ | 
				
			|||
                    title : newV.meta.title, | 
				
			|||
                    path : newV.path | 
				
			|||
                }); | 
				
			|||
            }, | 
				
			|||
            immediate : true | 
				
			|||
        } | 
				
			|||
    }, | 
				
			|||
    methods:{ | 
				
			|||
        ...mapMutations("menu", ["addRecent","removeRecent"]), | 
				
			|||
        onClickItem(item){ | 
				
			|||
            this.$route.path != item.path && this.$router.push(item.path); | 
				
			|||
        }, | 
				
			|||
        onRemoveItem(item){ | 
				
			|||
            this.removeRecent(item); | 
				
			|||
            if(this.$route.path == item.path){ | 
				
			|||
                if(this.recentPages.length){ | 
				
			|||
                    this.$router.push(this.recentPages[this.recentPages.length-1].path) | 
				
			|||
                }else{ | 
				
			|||
                    this.$router.push("/") | 
				
			|||
                } | 
				
			|||
            } | 
				
			|||
        }, | 
				
			|||
        isActive(item) { | 
				
			|||
            return this.$route.path == item.path; | 
				
			|||
        } | 
				
			|||
    } | 
				
			|||
} | 
				
			|||
</script> | 
				
			|||
<style lang="scss" scoped> | 
				
			|||
.recent_pages{  | 
				
			|||
    display: flex; flex-direction: row; align-items:stretch; | 
				
			|||
    h4{ width: 100px; height: 32px; line-height: 32px; text-align: center; margin: 0; padding: 0; font-weight: bold;} | 
				
			|||
    .history_buttons { | 
				
			|||
        flex: 1; | 
				
			|||
        display: flex; | 
				
			|||
        flex-direction: row; | 
				
			|||
        .unit { | 
				
			|||
            cursor: default; margin-right: 3px; | 
				
			|||
            position: relative; | 
				
			|||
            height: 30px; | 
				
			|||
            background-color: #048; | 
				
			|||
 | 
				
			|||
            &.active { | 
				
			|||
            background-color: #09C; | 
				
			|||
            color: #FFF; | 
				
			|||
            } | 
				
			|||
 | 
				
			|||
            .btn_main { | 
				
			|||
            height: 30px; | 
				
			|||
            line-height: 30px; | 
				
			|||
            padding: 0 12px | 
				
			|||
            } | 
				
			|||
 | 
				
			|||
            .btn_close { | 
				
			|||
            background-color: #C00; | 
				
			|||
            position: absolute; | 
				
			|||
            right: 0; | 
				
			|||
            top: 0; | 
				
			|||
            } | 
				
			|||
        } | 
				
			|||
    } | 
				
			|||
} | 
				
			|||
</style> | 
				
			|||
					Loading…
					
					
				
		Reference in new issue