zhoule
9 months ago
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