refs #355 Add back button in tag page
This commit is contained in:
parent
1d1839a0ea
commit
d6ee7b3578
|
@ -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>
|
||||||
|
|
|
@ -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"
|
||||||
|
|
Loading…
Reference in New Issue