refs #355 Add back button in tag page

This commit is contained in:
AkiraFukushima 2018-06-01 12:34:46 +09:00
parent 1d1839a0ea
commit d6ee7b3578
2 changed files with 52 additions and 15 deletions

View File

@ -1,8 +1,22 @@
<template> <template>
<div id="hashtag"> <div id="hashtag">
<div class="search-header" v-loading="false"> <div class="search-header" v-loading="false">
<el-form :ineline="true"> <el-form>
<div class="form-wrapper">
<div class="form-item" v-show="tagPage()">
<el-button type="text" @click="back">
<icon name="chevron-left"></icon>
</el-button>
</div>
<div class="form-item input">
<input v-model="tag" placeholder="Tag name" class="search-keyword" v-shortkey="['enter']" @shortkey="search" autofocus></input> <input v-model="tag" placeholder="Tag name" class="search-keyword" v-shortkey="['enter']" @shortkey="search" autofocus></input>
</div>
<div class="form-item" v-show="tagPage()">
<el-button type="text">
<icon name="thumbtack"></icon>
</el-button>
</div>
</div>
</el-form> </el-form>
</div> </div>
<router-view></router-view> <router-view></router-view>
@ -23,6 +37,12 @@ export default {
}, },
search () { search () {
this.$router.push({ path: `/${this.id()}/hashtag/${this.tag}` }) this.$router.push({ path: `/${this.id()}/hashtag/${this.tag}` })
},
tagPage () {
return this.$route.name === 'tag'
},
back () {
this.$router.push({ name: 'hashtag-list' })
} }
} }
} }
@ -36,6 +56,22 @@ export default {
background-color: var(--theme-selected-background-color); background-color: var(--theme-selected-background-color);
padding: 8px 12px; padding: 8px 12px;
.form-wrapper {
display: flex;
align-items: center;
.input {
flex-grow: 3;
}
.form-item {
margin: auto 8px;
.el-button {
padding: 0;
}
}
.search-keyword { .search-keyword {
width: 100%; width: 100%;
background-color: var(--theme-background-color); background-color: var(--theme-background-color);
@ -50,5 +86,6 @@ export default {
box-sizing: border-box; box-sizing: border-box;
} }
} }
}
} }
</style> </style>

View File

@ -16,7 +16,7 @@
</div> </div>
</div> </div>
<el-menu <el-menu
:default-active="activeRoute" default-active="activeRoute"
:background-color="themeColor" :background-color="themeColor"
text-color="#909399" text-color="#909399"
active-text-color="#ffffff" active-text-color="#ffffff"