Vue实现搜索页面

目录

一、效果

二、实现

---

一、效果：

实现功能如下图所示：（因为被腰斩，样式未调整）

二、实现

直接上代码：

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>

代码可能有冗余未删除，若代码有误或可以改进，欢迎指正！