目录
一、效果:
实现功能如下图所示:(因为被腰斩,样式未调整)
二、实现
直接上代码:
pages/Search.vue //搜索页
<template>
<div class="search-page">
<page-header></page-header>
<keep-alive> //keep-alive包裹需更新组件
<search-content></search-content>
</keep-alive>
<page-footer></page-footer>
</div>
</template>
<script>
import PageHeader from '../components/PageHeader'
import SearchContent from '../components/SearchContent'
import PageFooter from '../components/PageFooter'
export default {
name: 'Search',
components: {PageHeader, SearchContent, PageFooter},
beforeRouteUpdate (to, from, next) {
console.log(to, from, next)
if (to.query.input !== from.query.input) {
next()
}
}
}
</script>
components/SearchContent.vue //搜索内容组件
<template>
<div class="search-content">
<div class="searchContentImg"> //背景图片
<img id="scimg" src="../assets/welcome.png" alt="">
</div>
<div class="secSearch">
<div class="searchBox"> //搜索框
<el-input v-model="input" placeholder="按关键词搜索" class="search" @keyup.enter.native="handleJump(input)"></el-input>
<a @click="handleJump(input)"><i class="el-icon-search"></i></a>
</div>
//搜索内容框高度动态变化 :style
<div v-if="searchData.length>0" class="search-list" :style="{height: heightCss}">
<p class="total-result" :total="total" ref="pTitle">共{{ total }}条</p>
//搜索内容列表
<div class="search-board" ref="ulList">
<ul class="search-fix">
<li v-for="(item, index) in searchData" :key="index">
<span>{{ item }}</span>
</li>
</ul>
</div>
//搜索内容分页
<el-pagination v-if="pageshow" @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="page" :page-sizes="[1, 2,5, 10]" :page-size="limit"
layout="total, sizes, prev, pager, next, jumper" :total="total" class="page" ref="pageHeight">
</el-pagination>
</div>
<div v-else class="search-empty">
<ul>
<li>
<img src="../assets/welcome.png" class="empty-img">
</li>
</ul>
</div>
</div>
<div class="searchImg">
<img id="simg" src="../assets/welcome.png" alt="">
</div>
</div>
</template>
<script>
export default {
name: 'SearchContent',
data: function () {
return {
input: this.$route.query.input,
keyword: this.$route.query.input,
heightCss: '',
list: ['1', '12', '3', '1', '12', '3', '1', '12', '3'],
data: [],
searchData: [],
limit: 5,
total: null,
page: 1,
pageshow: true
}
},
activated () { //初始搜索内容(由其他页面搜索内容跳转至搜索页/更新搜索内容)
this.pageList()
console.log('actived!')
},
methods: {
handleJump (input) {
this.$router.push(
{path: '/search', query: {input: input}},
onComplete => {},
onAbort => {})
},
pageList () {
// 发请求拿到数据并暂存全部数据(此处未接接口)
this.data = ['1', '12', '3', '1', '12', '3', '1', '12', '3']
this.page = 1
this.pageshow = false
this.getList()
this.$nextTick(() => {
this.pageshow = true
})
console.log('data')
console.log(this.data)
},
getList () {
// es6过滤得到满足搜索条件的展示数据list
let searchData = this.data.filter((item, index) =>
item.includes(this.keyword)
)
console.log('keyword')
console.log(this.keyword)
// 过滤分页
this.searchData = searchData.filter((item, index) =>
index < this.page * this.limit && index >= this.limit * (this.page - 1)
)
// 分页的总数据
this.total = searchData.length
console.log('searchData')
console.log(this.searchData)
},
handleSizeChange (val) {
console.log(`每页 ${val} 条`)
this.limit = val
this.getList()
},
handleCurrentChange (val) {
console.log(`当前页: ${val}`)
this.page = val
this.getList()
},
getHeight () {
var heightCss1 = window.getComputedStyle(this.$refs.ullist).height // 100px
var heightCss2 = window.getComputedStyle(this.$refs.pTitle).height // 100px
var heightCss3 = window.getComputedStyle(this.$refs.pageHeight).height // 100px
this.heightCss = heightCss1 + heightCss2 + heightCss3 + heightCss3
console.log(this.heightCss)
}
},
inject: ['reload'],
watch: {
'$route' (to, from) {
this.input = to.query.input
this.reload()
}
}
}
</script>
<style scoped>
.searchContentImg {
width: 100%;
height: 20%;
top: 10%;
left: 0;
position: absolute;
margin: 0 0 0 0;
z-index: -1;
}
.secSearch {
width: 50%;
height: 600px;
top: 15%;
left: 10%;
position: absolute;
}
.secSearch p {
font-size: 30px;
font-weight: 700;
float: left;
}
.searchBox {
width: 80%;
top: 2%;
position: relative;
z-index: 10;
}
.searchBox i {
float: right;
left: -10px;
position: relative;
margin-top: -30px;
color: #b5b5b5;
z-index: 11;
font-size: 18px;
cursor: pointer;
}
#scimg {
width: 100%;
height: 100%;
}
.search-list {
width: 100%;
padding-bottom: 1.5%;
top: 30%;
position: absolute;
border: 1px solid #9c9c9c;
}
.search-board {
width: 90%;
margin-left: 5%;
margin-top: 8%;
border-top: 1px solid #9c9c9c;
}
.search-board ul {
margin-top: 1%;
}
.search-board ul li {
list-style-type: none;
text-align: left;
line-height: 30px;
}
.searchImg {
width: 20%;
height: 100%;
top: 40%;
left: 65%;
position: absolute;
float: right;
}
#simg {
width: 100%;
float: left;
}
.page {
top: 5%;
right: 0;
position: relative;
}
.empty-img {
width: 100%;
margin-top: 10%;
left: 1%;
position: relative;
}
.search-empty {
width: 100%;
height: 110%;
top: 30%;
position: absolute;
border: 1px solid #9c9c9c;
}
.search-empty ul li {
list-style-type: none;
}
.total-result {
display: block;
height: 24px;
line-height: 24px;
font-size: 24px;
color: #333;
width: 90%;
text-align: left;
}
.search-list p{
margin-top: 3%;
margin-left: 5%;
}
</style>
代码可能有冗余未删除,若代码有误或可以改进,欢迎指正!