<template>
<div id="main-search">
<div class="main-search-header">
<Icon type="ios-arrow-back" class="main-search-header-icon" @click="back"/>
<Input search enter-button ref="input" class="main-search-header-input" :v-model="search" @click="searchAll" on-clear="searchAll" on-blur="searchAll" >
</Input>
</div>
<CellGroup class="cell-group" @on-click="changeSelectedPausedIndex">
<Cell v-for="(item,index) in tablist" :key="index" class="cell-title" :class="{'cell-title-select':(selectIndex === index)}" :name="index">
<div >
<h3>{{item.label}}</h3>
</div>
</Cell>
</CellGroup>
<div class="content" >
<router-view :inputValue='search' />
</div>
</div>
</template>
<script>
export default {
name: 'search',
data: () => {
return {
theme1: 'light',
showLogoutModal: false,
search: null,
badgeMax: 99,
text: '实现指定url跳转,这个方法不会向history栈添加记录,使用后退this.$router.back();会返回到上上一个页面。因为它的上个页面是不存在的。history栈没有记录',
selectIndex: 0,
tablist: [{
id: '0',
label: '全部',
url: 'search-all'
},
{
id: '1',
label: '应用',
url: 'search-app'
},
{
id: '2',
label: '消息',
url: 'search-msg'
}
]
}
},
methods: {
searchAll (e) {
window.alert('HANDEL')
console.log(e)
},
changeSelectedPausedIndex (e) {
console.log(this.search)
const _this = this
this.selectIndex = e
const newPath = `/search/${this.tablist[e].url}`
if (newPath !== this.$router.currentRoute.path) {
this.$store.dispatch('saveCurrentStep', newPath)
this.$router.replace({
path: newPath,
query: {
'search-value': _this.search
}
})
}
},
back () {
window.history.back()
},
inputFocus (type) {
this.$refs.input.focus({
cursor: type
})
}
},
mounted () {
this.inputFocus('end')
}
}
</script>
<style>
</style>