工作day15

搜索框的位移问题

<template>
  <div class="search-modal" v-if="showModal" ref="main_search" >
      <div class="mask"></div>
      <transition name="searchModalAni">
        <div class="search-container" @click="blur">
          <div class="arrow" @click="closeModal"><img src="~IMAGES/common/small_down_arrow.png" alt=""></div>
          <div class="search-body" ref="search_body">
            <div class="search-title">
              <img src="~IMAGES/common/small_log.png" alt="" class="small-logo">
               <span class="logo-title">秒可技能搜索</span>
            </div>
            <div class="search-input">
                <input type="text" class="input-show" v-model="keyword" @input="hiddenSearch(true)" ref="centerInput" @focus="getHistory" id="centerInput">
                <a href="javascript:;" class="search-btn">秒可一下</a>
                <ul v-if="showHistoryList" class="history-list">
                  <li v-for="(item, index) of searchHistory" :key="index" class="history-list-item" @click="handleClickCenterItem(item, true)">
                    {{item}}
                  </li>
                </ul>
            </div>
          </div>  
       </div>
      </transition> 
      <!-- 左边输入框 -->
      <div class="lf-search-container" ref="lfSearchDom">
          <div class="lf-search-body">
              <img src="~IMAGES/common/small_log.png" alt="" class="lf-small-logo">
              <input type="text" class="lf-input" v-model="keyword" ref="lf_Input" @input="searchPractice" @keyup.enter="toSearch">
              <a href="javascript:;" class="lf-btn" @click="toSearch">秒可一下</a>
              <ul class="lf-history-list" v-show="lfShowHistoryList">
                <!-- 里面的数据id -->
                  <li v-for="(item, index) of inputSearchList" :key="index" class="lf-history-list-item" @click.stop="handleClickCenterItem(item.name, true)">
                    {{item.name}}
                  </li>
                </ul>  
          </div>
      </div>
      <!-- 课程列表 -->
        <div class="search-list-container"  v-if="showResult">
        <!-- <div class="course-title"></div> -->
        <div class="course-list">
          <div class="totalNum">{{totalNum > 0 ? '秒可为你找到' + totalNum + '条相关结果' : '秒可未找到相关结果'}}</div>
          <div class="search-result" v-if="totalNum">
            <div v-for="(item, index) in courseList" :key="index" class="search-list-item" @click="toSkillPage(item.id)"> 
              <el-container>
                <el-header class="course-title"><a href="javascript:;">{{item.name}}</a></el-header>
                <el-container>
                    <el-aside class="course-img" v-show="item.cover_picture"><img :src="item.cover_picture" alt=""></el-aside>
                    <el-main class="course-introduction" v-show="item.introduction">
                      <div class="introduction-content">
                        {{item.introduction}}
                      </div> 
                    </el-main>
                </el-container>
              </el-container>
            </div>
          </div>
          <div class="empty" v-else>
            <img src="~IMAGES/common/search_empty.png" alt="">
          </div>
        </div>
     </div>
    <!-- 分页组件 -->
     <div class="paging-block" v-show="showResult && totalNum">
        <el-pagination
          background="#8fe9de"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-size="5"
          :current-page="currentPage"
          :pager-count="7"
          layout="prev, pager, next, jumper"
          :total="totalNum">
        </el-pagination>
   </div>
  </div>
</template>
<script>
import lodash from 'lodash'
export default {
  name: 'SearchModal',
  data () {
    return {
      keyword: '',
      page: 1,
      offset: 0,
      practice_list: [],
      searchHistory: [],
      inputSearchList: [],
      showHistoryList: false,
      lfShowHistoryList: false,
      lfSearchBody: false,
      showSearchList: false,
      showResult: this.showSearchResult,
      currentPage: 1, // 当前页码
      // showCenterSearch: false
      showPageBlock: false
    }
  },
  props: {
    showModal: Boolean,
    showSearchResult: Boolean,
    courseList: {
      type: Array,
      default: []
    },
    totalNum: {
      type: Number,
      default: 0
    }
  },
  mounted () {
    // this.getFocus()
  },
  methods: {
    // 关闭按钮
    closeModal () {
      // console.log(this.showModal)
      this.keyword = ''
      // 关闭modal框、历史列表同时让输入框的值为空
      this.$emit('close', this.showModal)
      this.showHistoryList = false
      this.$refs.lf_Input.value = ''
      this.showModal = false
      // 隐藏左边的输入框，但是还是占据中间（重要）
      this.$refs.lfSearchDom.style.visibility = 'hidden'
      this.showResult = false
      this.showPageBlock = false
    },
    // 监听中间输入框的输入触发, 让中间的输入框隐藏、左边的输入框显示出来并且拿到光标
    hiddenSearch (flag = false) {
      this.$refs.search_body.style.display = 'none'
      this.$refs.lfSearchDom.style.visibility = 'visible'
      this.$refs.lf_Input.focus()
      // 如果flag为真, 就重新获取搜索记录
      if (flag) {
        this.searchPractice()
      }
      this.lfSearchBody = true
    },
    // 点击搜索或者回车的时候触发搜索
    toSearch (searchString, flag = false) {
      // console.log(this.keyword)
      console.log(searchString, flag)
      // 如果是点击的搜索记录item, 就用searchString进行搜索, 否则就用keyword
      let search = flag ? searchString : this.keyword
      console.log(search)
      // 根据搜索的search是否为空, 选择显示搜索记录下拉框
      var judegeNotEmpty = false
      if (search !== '') {
        judegeNotEmpty = true
        console.log(judegeNotEmpty)
        this.judegeHiddenDropList(judegeNotEmpty)
      } else {
        judegeNotEmpty = false
        this.judegeHiddenDropList(judegeNotEmpty)
      }
      // let page = this.page
      this.setStorage(search)
      // 搜索出来的课程名称和页码和条数
      // this.$api.getSearchList({search, page})
      //   .then(res => {
      //     console.log(res)
      //     this.practice_list = res.practice_list
      //   })
      // 去courseCenter组件请求数据
      this.$emit('getCourseList', search)
      // 让输入框文字改变
      this.keyword = search
      this.showResult = true
    },
    getHistory () {
      const localSearchList = JSON.parse(window.localStorage.getItem('search_history')) || []
      console.log(localSearchList)
      this.searchHistory = localSearchList
      console.log(this.searchHistory)
      // this.$refs.lf_Input.focus()
      if (localSearchList.length !== 0) {
        this.showHistoryList = true
        this.$refs.centerInput.style.borderColor = '#1FAE9D'
        this.$refs.centerInput.style.borderBottom = 'none'
        this.$refs.centerInput.style.borderBottomLeftRadius = 0 + 'px'
      }
    },
    setStorage (search) {
      let localSearchList = JSON.parse(window.localStorage.getItem('search_history')) || []
      console.log(localSearchList)
      // 数组
      // console.log(typeof (localSearchList))
      var reg = /^\s+$/g
      // 当输入的内容为非空格的时候
      if (!(reg.test(search)) && typeof search === 'string') {
        localSearchList.unshift(search)
      }
      let uniqueArray = Array.from(new Set(localSearchList))
      console.log(uniqueArray)
      let aheadFour = uniqueArray.splice(0, 5)
      window.localStorage.setItem('search_history', JSON.stringify(aheadFour))
    },
    // 判断是否出现输入框下面的搜索列表
    judegeHiddenDropList (notEmpty) {
      if (notEmpty) {
        console.log(this.$refs.lf_Input)
        this.$refs.lf_Input.style.borderBottom = '1px solid #1FAE9D'
        this.$refs.lf_Input.style.borderBottomLeftRadius = 6 + 'px'
        this.lfShowHistoryList = false
      }
    },
    // 点击中间的搜索记录item,不再请求后端搜索记录,要不左边的搜索记录表就会显示出来
    handleClickCenterItem (searchString, flag = false) {
      this.toSearch(searchString, flag)
      this.hiddenSearch(false)
    },
    // 当左边的输入框失去焦点的时候, 把搜素的记录的下拉列表隐藏
    blur () {
      console.log('失去焦点')
      this.judegeHiddenDropList(true)
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      console.log(this.keyword, val)
      this.$emit('getCurrentData', this.keyword, val)
    },
    toSkillPage (id) {
      console.log(id)
      this.$emit('toSillPractice', id)
    },
    // 实时监听搜索输入的内容, 进行防抖处理,出现左边的下拉列表
    searchPractice: lodash.debounce(function () {
      console.log(this.keyword)
      let keyword = this.keyword
      // var judegeNotEmpty = false
      // 监听输入框输入时的时候触发和防抖
      // if (flag === false) {
      //   return
      // }
      this.$api.getSearchPractice({search: keyword})
        .then(res => {
          console.log(res)
          // 监听输入获取的数据
          let allInputSearchList = res.practice_list
          // 只取前面5条数据
          this.inputSearchList = allInputSearchList.splice(0, 5)
          if (res.practice_list.length !== 0) {
            this.lfShowHistoryList = true
            this.$refs.lf_Input.style.borderBottom = 'none'
            this.$refs.lf_Input.style.borderBottomLeftRadius = 0 + 'px'
            // judegeNotEmpty = true
            // this.judegeHiddenDropList(judegeNotEmpty)
          }
          if (res.practice_list.length === 0) {
            this.lfShowHistoryList = false
            this.$refs.lf_Input.style.borderBottom = '1px solid #1FAE9D'
            this.$refs.lf_Input.style.borderBottomLeftRadius = 6 + 'px'
            // judegeNotEmpty = false
            // this.judegeHiddenDropList(judegeNotEmpty)
          }
        })
    }, 100)
  }
}
</script> 
<style>
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #8fe9de;  
  color: #fff;
}
.el-input.is-active .el-input__inner, .el-input__inner:focus {
  border-color: #8fe9de;
  outline: none;
}
</style>
<style scoped>
.searchModalAni-enter-active,  .searchModalAni-enter-active{
  transition: all 1s ease;
}
.searchModalAni-leave-active, .search-enter {
  height: 0px !important;
}
.searchModalAni-enter-active, .searchModalAni-leave {
  height: 800px;
}
.search-modal {
    position: fixed;
    top: 0;
    left: 0;
    height: 80%;
    width: 100%;
    /* z-index: 888; */
}
.arrow {
  position: absolute;
  right: 30px;
  top: 20px;
  font-size: 30px;
  color: #cccccc;
  cursor: pointer;
  /* font-weight: bold; */
}
.mask {
    position: fixed;
    top: 0;
    left: 0;
    height: 80%;
    width: 100%;
    background-color: #000000;
    opacity: 0.5;
}
.search-container {
    position: fixed;
    top: 100px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background: #ffffff;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    /* z-index: 30; */
}
.search-body {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%);
  /* padding-top: 160px; */
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* z-index: 10; */
}

.lf-search-container {
  position: absolute;
  top: 146px;
  left: 50px;
  visibility: hidden;
}
.lf-search-body {
  display: flex;
  height: 62px;
  width: 686px;
  align-items: center;
}
.lf-small-logo {
  height: 29px;
  width: 37px;
  vertical-align: middle;
}
.lf-input {
  margin-left: 16px;
  width: 500px;
  height: 48px;
  background: #ffffff;
  outline: none;
  border: none;
  padding-left: 15px;
  border: 1px solid #1FAE9D;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  border-right: none;
  font-size: 18px;
  color: #0E0E0E;
  box-sizing: border-box;
}
.lf-btn {
  width: 88px;
  height: 48px;
  line-height: 52px;
  text-decoration: none;
  text-align: center;
  background: #1FAE9D;
  color: #ffffff;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  border-right: none;
  border: 1px solid #1FAE9D;
  border-left: none;
  box-sizing: border-box;
}
.search-title {
  /* font-weight: bold; */
  font-size: 29px;
  color:#080808;
}
.logo-title {
  margin: 12px;
  letter-spacing: 2px;
}
.small-logo {
  vertical-align: middle;
}
.search-input {
  margin-top: 40px;
  display: flex;
  position: relative;
}
.input-show {
  height: 46px;
  width: 440px;
  outline: none;
  border: none;
  border: 1px solid #D7D7D7;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  box-sizing: border-box;
  /* border-right: none; */
}
.search-btn {
  height: 46px;
  width: 80px;
  text-decoration: none;
  color: #ffffff;
  background:#1FAE9D;
  text-align: center;
  line-height: 46px;
  box-sizing: border-box;
  border: 1px solid #1FAE9D;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  font-size: 16px;
}
.left-search {
  position: absolute;
  left: 0;
  top: 800;
  width: 300px;
  height: 500px;
  /* z-index: 30; */
}
.history-list {
  position: absolute;
  top: 26px;
  left: 0px;
  width: 440px;
  list-style: none;
  border: 1px solid #1FAE9D;
  border-top: none;
  padding: 0;
  box-sizing: border-box;
}
.history-list-item {
  height: 38px;
  width: 100%;
  line-height: 38px;
  color: #74777B;
  font-size: 16px;
  cursor: pointer;
  padding-left: 10px;
  box-sizing: border-box;
}
.history-list-item:hover, .lf-history-list-item:hover {
  color: #1FAE9D;
}
.lf-history-list {
  position: absolute;
  top: 39px;
  left: 53px;
  width: 501px;
  list-style: none;
  padding: 0;
  box-sizing: border-box;
  border: 1px solid #1FAE9D;
  border-top: none !important;
  background: #ffffff;
  z-index: 8;
  /* padding-left: 4px; */
}
.lf-history-list-item {
  height: 38px;
  width: 100%;
  line-height: 38px;
  color: #74777B;
  font-size: 16px;
  cursor: pointer;
  padding-left: 10px;
  box-sizing: border-box;
}
.search-list-container {
    position: fixed;
    top: 216px;
    left: 100px;
    height: 80%;
    /* height: 500px; */
    width: 590px;
}
.totalNum {
  font-size: 12px;
  color: #838383;
}
.course-title {
  padding-left: 0;
  padding-right: 0;
  /* margin-top: 20px; */
  /* color: #2440B3; */
  font-size: 18px;
  height: 30px !important;
  width: 100px !important;
}
.course-title a {
  color: #73c9bf;
}
.el-header {
  height: 20px;
}
.course-img {
  width: 70px !important;
  height: 70px !important;
  margin-top: 4px;
  margin-right: 12px;
}
.course-img img {
  width: 70px;
  height: 70px;
  vertical-align: middle;
}
.course-introduction {
  width: 533px;
  height: 60px;
}
.el-aside {
  overflow: hidden;
  height: 70px;
  width: 70px;
}
.el-main {
  padding: 0;
  margin-top: 10px;
  /* margin-left: 12px; */
  overflow: hidden;
  /* letter-spacing: 2px; */
  word-spacing: 2px;
  text-align: justify;
  font-size: 12px;
  color: #0F0F0F;
}
.introduction-content {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.search-list-item {
  margin-top: 20px;
}
.paging-block {
  position: absolute;
  /* bottom: 10px; */
  left: 90px;
  height: 60px;
  line-height: 60px;
  bottom: -160px;
}
/* .paging-block .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #8fe9de !important;
    color: #FFF;
} */
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color:#009688 !important; 
    color: #fff;
}

.el-pager li.active {
    color: #1FAE9D !important;
}
.el-pager li:hover {
    color: #1FAE9D !important;
}
</style>