9 changed files with 238 additions and 69 deletions
@ -0,0 +1,6 @@ |
|||
.search_box{ |
|||
background-color: #fff; |
|||
} |
|||
section{ |
|||
margin: 10px 10px 0; |
|||
} |
|||
@ -0,0 +1,126 @@ |
|||
<template> |
|||
<div> |
|||
<div class="flex flex-center2 search_box"> |
|||
<van-search v-model="searchKey" shape="round" background="#fffff" placeholder="请输入搜索关键词" class="flex1" @blur="handelBlurSearch" /> |
|||
<van-button type="info" round size="small" class="m-right10" @click |
|||
="handelClickSearch">搜索</van-button> |
|||
</div> |
|||
<span v-if="searchFlag" class="p-12 flex">按关键字“<span class="blue">{{searchKey}}</span>”搜索到的结果如下</span> |
|||
<section class='card m-top10' v-else> |
|||
<div class="title"><span>热门搜索</span></div> |
|||
<van-button type="default" round size="small" class="m-right10 m-top10">测试</van-button> |
|||
</section> |
|||
<div class="card" v-if="searchFlag"> |
|||
<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getTable"> |
|||
<van-cell v-for="(item, index) in tableList" :key="index" :label="item.date"> |
|||
<template #title> |
|||
<span v-html="textHighlighting(item.title, searchKey)" class="van-multi-ellipsis--l2"></span> |
|||
</template> |
|||
</van-cell> |
|||
</van-list> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
searchKey:this.$route.query.searchKey || null, |
|||
loading: false, |
|||
finished: false, |
|||
searchFlag:false, |
|||
tableList: [ |
|||
{ |
|||
title: '2024年青岛市北区最新养老补贴发放政策', |
|||
date: '2022-09-01' |
|||
}, |
|||
{ |
|||
title: '2024年青岛市北区最新养老补贴发放政策', |
|||
date: '2022-09-01' |
|||
}, |
|||
{ |
|||
title: '2024年青岛市北区最新养老补贴发放政策', |
|||
date: '2022-09-01' |
|||
}, |
|||
{ |
|||
title: '2024年青岛市北区最新养老补贴发放政策', |
|||
date: '2022-09-01' |
|||
}, |
|||
{ |
|||
title: '2024年青岛市北区最新养老补贴发放政策2024年青岛市北区最新养老补贴发放政策2024年青岛市北区最新养老补贴发放政策2024年青岛市北区最新养老补贴发放政策', |
|||
date: '2022-09-01' |
|||
}, |
|||
{ |
|||
title: '2024年青岛市北区最新养老补贴发放政策', |
|||
date: '2022-09-01' |
|||
}, |
|||
{ |
|||
title: '2024年青岛市北区最新养老补贴发放政策', |
|||
date: '2022-09-01' |
|||
}, |
|||
{ |
|||
title: '2024年青岛市北区最新养老补贴发放政策', |
|||
date: '2022-09-01' |
|||
}, |
|||
{ |
|||
title: '2024年青岛市北区最新养老补贴发放政策', |
|||
date: '2022-09-01' |
|||
} |
|||
], |
|||
pageSize:20, |
|||
pageNo:1 |
|||
}; |
|||
}, |
|||
created() { |
|||
if(this.$route.query.searchKey){ |
|||
this.searchFlag = true; |
|||
} |
|||
}, |
|||
methods: { |
|||
handelBlurSearch(){ |
|||
this.searchFlag = this.searchKey?true:false; |
|||
}, |
|||
//只需在这里调接口 |
|||
getTable() { |
|||
setTimeout(() => { |
|||
for (let i = 0; i < 10; i++) { |
|||
this.tableList.push({title:'这是新加的市北区',date:'2024-10-5'}); |
|||
} |
|||
console.log(this.tableList); |
|||
// 加载状态结束 |
|||
this.loading = false; |
|||
|
|||
// 数据全部加载完成 |
|||
if (this.tableList.length >= 40) { |
|||
this.finished = true; |
|||
} |
|||
}, 1000); |
|||
}, |
|||
|
|||
handelClickSearch(){ |
|||
this.searchFlag = true; |
|||
this.pageNo = 1; |
|||
this.getTable(); |
|||
} |
|||
}, |
|||
components: { }, |
|||
computed: { |
|||
textHighlighting(textItem, searchText){ |
|||
return (textItem,searchText) =>{ |
|||
const searchTextArr = searchText.split('') |
|||
const textItemArr = textItem.split('') |
|||
const result = textItemArr.map(item => { |
|||
return searchTextArr.includes(item) ? `<span class="blue">${item}</span>` : item |
|||
}) |
|||
return result.join('') |
|||
} |
|||
}, |
|||
}, |
|||
watch: { }, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='less' scoped> |
|||
@import './index'; |
|||
</style> |
|||
@ -0,0 +1,22 @@ |
|||
<template> |
|||
<div class=''> |
|||
<div>123456789</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return {}; |
|||
}, |
|||
created() {}, |
|||
methods: {}, |
|||
components:{}, |
|||
computed:{}, |
|||
watch: {}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='less'> |
|||
|
|||
</style> |
|||
Loading…
Reference in new issue