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