<template>
|
<page-header-wrapper
|
:tab-list="tabList"
|
:tab-active-key="tabActiveKey"
|
:tab-change="handleTabChange"
|
>
|
<template v-slot:content>
|
<div class="ant-pro-page-header-search">
|
<a-input-search size="large" style="width: 80%; max-width: 522px;">
|
<template v-slot:enterButton>
|
搜索
|
</template>
|
</a-input-search>
|
</div>
|
</template>
|
<router-view />
|
</page-header-wrapper>
|
</template>
|
|
<script>
|
const getActiveKey = (path) => {
|
switch (path) {
|
case '/list/search/article':
|
return '1'
|
case '/list/search/project':
|
return '2'
|
case '/list/search/application':
|
return '3'
|
default:
|
return '1'
|
}
|
}
|
export default {
|
name: 'SearchLayout',
|
data () {
|
return {
|
tabList: [
|
{ key: '1', tab: '文章' },
|
{ key: '2', tab: '项目' },
|
{ key: '3', tab: '应用' }
|
],
|
tabActiveKey: '1',
|
search: true
|
}
|
},
|
created () {
|
this.tabActiveKey = getActiveKey(this.$route.path)
|
|
this.$watch('$route', (val) => {
|
this.tabActiveKey = getActiveKey(val.path)
|
})
|
},
|
methods: {
|
handleTabChange (key) {
|
this.tabActiveKey = key
|
switch (key) {
|
case '1':
|
this.$router.push('/list/search/article')
|
break
|
case '2':
|
this.$router.push('/list/search/project')
|
break
|
case '3':
|
this.$router.push('/list/search/application')
|
break
|
default:
|
this.$router.push('/workplace')
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.ant-pro-page-header-search {
|
text-align: center;
|
margin-bottom: 16px;
|
}
|
</style>
|
