工作05

##输入框的调整

<template>
  <div class="container">
    <div class="mask"></div>
    <div class="input-body">
      <div class="main-input"  ref="input_body">
        <div class="title" ref="title">秒可科技</div>
        <div class="input-logo">
          <img src="../assets/logo.png" alt="">
         
          <div class="inputAndList">
             <input type="text" @input="inputing" v-model="keyword" 
          @keyup.enter="toSearch" @focus="getHistoryList" @blur="blur">
            <ul class="history-list" ref="history_ul" v-show="showHistoryList">
              <li v-for="(item, index) in searchHistory" :key="index">
                {{item}}
              </li>
            </ul>
            <ul class="search-list" v-show="showSearchContent" ref="search_list">
              <li v-for="(item, index) in searchContent" :key="index">
                {{item}}
              </li>
            </ul>
          </div>
          <div class="search-btn">搜索科技</div>
        </div>
        <!-- <ul class="history-list" ref="history_ul" v-show="showHistoryList">
          <li v-for="(item, index) in searchHistory" :key="index">
            {{item}}
          </li>
        </ul>
        <ul class="search-list" v-show="showSearchContent" ref="search_list">
        <li v-for="(item, index) in searchContent" :key="index">
          {{item}}
        </li>
       </ul> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      showLogo: false,
      keyword: '',
      searchContent: [
        'excel',
        'office',
        'word',
        'vscode',
        'english'
      ],
      searchHistory: [],
      // searchContent: [],
      showHistoryList: false,
      showSearchContent: false
    }
  },
  methods: {
    inputing() {
      console.log('正在输入')
      // this.$refs.input_body.style.transform = 'translate(-80%, -120px)'
      this.$refs.input_body.style.left = 0 + 'px'
      this.$refs.input_body.style.top = 40 + 'px'
      // this.$refs.input_body.style.padding = 0
      // this.$refs.history_ul.style.transform = 'translate(0px, -30px)'
      this.$refs.history_ul.style.left = 34 + 'px'
      this.$refs.history_ul.style.top = 9 + 'px'
      this.$refs.title.style.display = 'none'
      this.showLogo = true
      this.showHistoryList = false
      if(this.searchContent.length !==0) {
        this.showSearchContent = true
      } else {
        this.showSearchContent = false
      }
    },
    toSearch() {
      // 搜索之后将记录放到localStorage中
      this.setHistory()
    },
    getHistoryList() {
      this.searchHistory  = JSON.parse(localStorage.getItem('search_history')) || []
      if(this.searchHistory.length !== 0) {
        this.showHistoryList = true
      }
    },
    setHistory() {
      var historyList = JSON.parse(localStorage.getItem('search_history')) || []
      if (this.keyword !== 0) {
        historyList.unshift(this.keyword)
        // 数组去重
        let uniqueArray = Array.from(new Set(historyList))
        localStorage.setItem('search_history', JSON.stringify(uniqueArray))
      }
    },
    blur() {
      this.showHistoryList = false
      this.showSearchContent = false
    }
  },
  watch: {
    keyword: function() {
      if (this.keyword === '') {
        console.log('key为空')
        this.showSearchContent = false
      } else {
        this.showHistoryList = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  position: relative;
  // display: flex;
  // flex-direction: column;
  // justify-content: center;
  // align-items: center;
  .mask {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #333333;
    opacity: 0.2;
    z-index: 2;
  }
  .input-body {
    width: 100%;
    height: 80%;
    position: fixed;
    display: flex;
    left: 0;
    bottom: 0;
    justify-content: center;
    background: #ffffff;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    z-index: 3;
    .main-input {
      position: absolute;
      left: 30%;
      top: 40%;
      // width: 0px;
      margin: 0 auto;
      text-align: center;
      // padding-top: 80px;
      .title {
        height: 30px;
        text-align: center;
        line-height: 30px;
      }
      .input-logo {
        display: flex;
        justify-content: center;
        // align-items: center;
        .search-btn {
          text-decoration: none;
          display: inline-block;
          box-sizing: border-box;
          height: 30px;
          line-height: 30px;
          width: 60px;
          color: #ffffff;
          background: cadetblue;
          font-size: 14px;
          text-align: center;
          // border: 1px solid cadetblue;
        }
        input {
          outline: none;
          border: 1px solid #cccccc;
          width: 300px;
          height: 30px;
          line-height: 25px;
          box-sizing: border-box;
          padding: 0;
        }
        img {
          height: 30px;
          width: 30px;
          margin-right: 4px;
        }
      }
      .history-list {
        list-style: none;
        position: absolute;
        left: 34px;
        top: 43px;
        padding: 0;
        // padding-left: 3px;
        width: 300px;
        text-align: left;
        box-sizing: border-box;
        background: #ffffff;
        border: 1px solid #cccccc;
        border-top: none !important;
        z-index: 6;
        li {
          height: 26px;
          line-height: 26px;
          width: 100%;
          border: none;
        }
      }
      .search-list {
        list-style: none;
        position: absolute;
        left: 34px;
        top: 13px;
        padding: 0;
        // padding-left: 3px;
        width: 300px;
        text-align: left;
        box-sizing: border-box;
        background: #ffffff;
        border: 1px solid #cccccc;
        border-top: none !important;
        z-index: 9;
        li {
          height: 26px;
          line-height: 26px;
          width: 100%;
          border: none;
        }
      }
    }
  }
}
</style>