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