vue实战之搜索框功能实现_搜索框vue

一、静态页面

<template>
  <div class="search">
    <div class="top">
      <van-nav-bar left-text="返回" left-arrow @click-left="$router.go(-1)" />
      <van-search autofocus="true" shape="round" v-model="search" show-action placeholder="请输入搜索关键词"
        @search="goSearch(search)" />
    </div>
    <div class="history">
      <div class="title">
        <span>最近搜索</span>
        <van-icon @click="clear" name="delete-o" size="16" />
      </div>
      <div class="list" v-if="history.length !== 0">
        <div v-for="item in history" :key="item" class="list-item">
          <div @click="goSearch(item)">
            {{ item }}
          </div>
          <div>
            <button @click="deleteHistory(item)">Ⅹ</button>
          </div>
        </div>
      </div>
      <div class="empty" v-else>暂无搜索记录</div>
    </div>
    <div class="result" v-if="list.length != 0">
      <div class="contain" v-for="(item, index) in list" v-bind:key="index" @click="getTodeatil(item.pid)">
        <van-image :src="item.smallImg" width="92%" height="60%" />
        <div class="detail">
          <div class="name">{{ item.name }}</div>
          <div class="enname">{{ item.enname }}</div>
          <div class="price">￥{{ item.price }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

二、样式美化

<style lang="less" scoped>
.search {
  width: 100%;
  height: 100%;
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
 
  .top {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
 
  .van-nav-bar {
    width: 24%;
  }
 
  ::v-deep .van-nav-bar__text {
    color: rgb(37, 72, 189);
  }
 
  ::v-deep .van-nav-bar .van-icon {
    color: rgb(37, 72, 189);
  }
 
  .van-search {
    width: 80%;
  }
 
  .history {
    width: 98%;
    background-color: aliceblue;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
 
    .title {
      height: 40px;
      width: 90%;
      line-height: 40px;
      font-size: 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 15px;
    }
 
    .list {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      width: 96%;
 
      .list-item {
        text-align: center;
        border-radius: 10px;
        padding: 5px;
        line-height: 16px;
        background: rgba(128, 128, 128, 0.4);
        font-size: 10px;
        border: 1px solid #efefef;
        overflow: hidden;
        white-space: nowrap;
        margin: 5px 5px;
        text-overflow: ellipsis;
        display: flex;
 
        align-items: center;
        justify-content: space-around;
 
        button {
          border: 0;
          outline: none;
          background-color: transparent;
          z-index: 99;
        }
      }
    }
 
    .empty {
      text-align: center;
      background-color: rgba(0, 255, 191, 0.1);
      border-radius: 10px;
      padding: 4px;
    }
  }
 
  .result {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    overflow: auto;
    align-items: center;
 
    .contain {
      background-color: aliceblue;
      width: 42%;
      border-radius: 10px;
      height: 220px;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 20px;
      margin-right: calc(10% / 4);
      margin-left: 16px;
 
      &:nth-child(1) {
        margin-top: 10px;
      }
 
      &:nth-child(2) {
        margin-top: 10px;
      }
 
      &:nth-child(2n) {
        margin-right: 0;
      }
 
      .van-image {
        margin-top: 4%;
      }
 
      .detail {
        width: 92%;
        margin-top: 4%;
        height: 30%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-around;
 
        .name {
          font-size: 16px;
          font-weight: 800;
        }
 
        .enname {
          color: rgba(128, 128, 128, 0.5);
          font-size: 12px;
        }
 
        .price {
          color: red;
          font-weight: 700;
        }
      }
    }
  }
}
</style>

三、灵魂逻辑

<script setup>
import axios from 'axios'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const search = ref('')
const history = ref([])
const list = ref([])
import { Toast } from 'vant';
const goSearch = (e) => {
  console.log(search.value)
  search.value = e
  if (search.value == '') {
    Toast('请输入关键字！');
  } else {
    axios
      .get('请求接口', {
        params: {
          参数值1：值,
          name: search.value//商品关键字
        }
      })
      .then(function (response) {
        console.log('search获取成功', response.data)
        if (response.data.result.length != 0) {
          list.value = response.data.result
          addHistory()
          saveSearchHistory()
        } else {
          addHistory()
          saveSearchHistory()
          Toast('暂无商品！');
          search.value = ''
        }
      })
      .catch(function (error) {
        console.log(error)
      })
  }
}
const getSearchHistory = () => {
  const historyData = localStorage.getItem('history')
  if (historyData) {
    history.value = JSON.parse(historyData)
  }
}
const addHistory = () => {
  if (!history.value.includes(search.value)) {
    history.value.unshift(search.value)
    if (history.value.length > 10) {
      history.value.pop()
    }
  }
}
//点击商品进行跳转到该商品的详情页
const getTodeatil = (pid) => {
  router.push({
    path: '/detail',
    query: {
      pid
    }
  })
}
onMounted(() => {
  getSearchHistory()
})
const saveSearchHistory = () => {
  localStorage.setItem('history', JSON.stringify(history.value))
}
const clear = () => {
  if (history.value.length != 0) {
    history.value = []
    saveSearchHistory()
  } else {
    Toast('暂无搜索记录！');
  }
}
const deleteHistory = (item) => {
  const index = history.value.indexOf(item)
  if (index !== -1) {
    history.value.splice(index, 1)
    saveSearchHistory()
  }
}
</script>

最终效果图