搜索添加历史记录，下拉按钮追随功能

这个就是仿唯品会的搜索框，如果是你被王老师带过的话，果断一点，废话不多说上代码

html： 注意图片自己找

<template>
  <div class="Search">
    <div class="search-header">
      <span><img :src="require('../../assets/focus_03.jpg')" alt="" /></span>
      <div>
        <img :src="require('../../assets/search.png')" alt="" />
        <input
          type="text"
          @keyup.enter="addTag"
          ref="input"
          placeholder="水星全棉套件109元起"
        />
        <img :src="require('../../assets/photo.png')" alt="" />
      </div>
      <span @click="addTag">搜索</span>
    </div>
    <div class="search-main">
      <div class="search-record">
        <div class="search-record-title">
          <h2>最近搜索</h2>
          <img
            @click="delRes = !delRes"
            class="trashCan"
            :src="require('../../assets/empty.png')"
            :style="{ display: delRes ? 'none' : 'block' }"
            alt=""
          />
          <div
            class="Tag-delete"
            :style="{ display: !delRes ? 'none' : 'block' }"
          >
            <span style="color: #666" @click="isDelAll = !isDelAll"
              >全部删除</span
            ><a></a
            ><span style="color: #fd4274" @click="delRes = !delRes">完成</span>
          </div>
        </div>
        <div class="search-tags">
          <li v-for="(item, index) in a" :key="index">
            <p>{{ item }}</p>
            <span
              @click="delTag(index)"
              :class="delRes ? 'delBlock' : 'delNone'"
              >╳</span
            >
          </li>
          <div ref="box" :style="{ opacity: b.length ? 1 : 0 }">
            <img :src="require('../../assets/focus_17.jpg')" alt="" />
          </div>
        </div>
      </div>
    </div>
    <div class="delAll" :style="{ display: isDelAll ? 'block' : 'none' }">
      <div class="delTagBox">
        <p>确认要删除全部搜索历史吗？</p>
        <span @click="isDelAll = !isDelAll">取消</span
        ><span @click="delall">删除</span>
      </div>
      <div class="delAllBg"></div>
    </div>
  </div>
</template>

script代码：

<script lang='ts' setup>
import { ref, onUpdated } from "vue";
const box = ref();
const input = ref();
let a = ref<string[]>([]);
let b = ref<string[]>([]);
const delRes = ref(false);
const isDelAll = ref(false);
onUpdated(() => {
  if (box.value.offsetTop > 100) {
    b.value = [...b.value, a[a.value.length - 1]];
    const list = a.value;
    list.splice(list.length - 1, 1);
    a.value = [...list];
  }
});
const addTag = () => {
  if (a.value.indexOf(input.value.value.trim()) - 1) {
    a.value = [input.value.value.trim(), ...a.value];
  }
  input.value.value = "";
};
const delTag = (index: number) => {
  const data = a.value;
  data.splice(index - 1, 1);
  a.value = [...data];
  b.value = [...data];
};
const delall = () => {
  a.value = [];
  b.value = [];
  delRes.value = !delRes.value;
  isDelAll.value = !isDelAll.value;
};
</script>

下面就是html代码了

<style lang="less">
.Search {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

.search-header {
  width: 100%;
  height: 90px;
  background-color: #e14866;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.search-header > div {
  display: flex;
  align-items: center;
  position: relative;
}

.search-header > div > img {
  position: absolute;
}

.search-header > div > img:nth-child(1) {
  left: 20px;
  top: 16px;
  width: 32px;
  height: 32px;
}

.search-header > div > img:nth-child(3) {
  right: 20px;
  width: 34px;
  height: 36px;
  display: none;
}

.search-header > div > img:nth-child(4) {
  right: 20px;
  width: 36px;
  height: 30px;
}

.search-header > div > input {
  width: 440px;
  padding-left: 60px;
  outline: none;
  height: 64px;
  border-radius: 100px;
  border: none;
  padding-right: 70px;
  color: #777;
  background-color: #f4f5f7;
  font-size: 26px;
  caret-color: #09c;
}

.search-header > div > input::-webkit-input-placeholder {
  color: #bfc0c2;
  font-size: 26px;
}

.search-header > span:nth-child(1) {
  width: 32px;
  height: 42px;
  vertical-align: top;
  margin-top: 2px;
  margin-left: 10px;
}

.search-header > span:nth-child(1) > img {
  width: 32px;
  height: 42px;
  vertical-align: top;
  margin-top: 2px;
}

.search-header > span:nth-child(3) {
  font-size: 28px;
  line-height: 60px;
  text-align: center;
  color: #fff;
  padding-right: 10px;
}

/* search-main */

.search-main {
  flex: 1;
  overflow: hidden;
}

.search-record {
  width: 700px;
  padding: 20px 30px 20px 20px;
}

.search-record-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-record-title > h2 {
  font-weight: 600;
  font-size: 34px;
}

.trashCan {
  width: 24px !important;
  height: 28.5px !important;
  margin-right: 4px;
}

.search-record-item {
  width: 100%;
  min-height: 100px;
  display: flex;
  flex-wrap: wrap;
  position: relative;
}

.search-record-itemBox {
  min-height: 100px;
  flex-wrap: wrap;
  display: none;
}

.search-record-itemBox > li {
  padding: 16px;
  background-color: #fbeff3;
  border-radius: 100px;
  color: #e04767;
  margin-right: 20px;
  margin-top: 20px;
  font-size: 30px;
  font-size: 26px;
}

.search-record-item > li {
  padding: 8px 20px;
  height: 40px;
  background-color: #fbeff3;
  border-radius: 100px;
  color: #e04767;
  margin-top: 20px;
  font-size: 30px;
  font-size: 24px;
  margin-left: 20px;
  line-height: 40px;
}

.record-touch {
  width: 32px;
  background-color: #f4f5f7 !important;
}

/* .search-record-item>li:nth-child(2n-1){margin-left: 0px;} */
.search-record-item > li > img {
  margin: 0 10px;
}

/* .record-touch{margin-left: 10px!important;} */
.Tag-delete {
  position: absolute;
  right: 20px;
  height: 60px;
  line-height: 60px;
  display: none;
}

.Tag-delete > span {
  font-size: 24px;
  display: inline-block;
  vertical-align: top;
}

.Tag-delete > a {
  width: 2px;
  height: 20px;
  background-color: #ccc;
  display: inline-block;
  margin: 0 16px;
  vertical-align: top;
  margin-top: 20px;
}

.delAll {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  display: none;
}

.delTagBox {
  width: 80vw;
  height: 200px;
  background-color: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
}

.delTagBox > p {
  font-size: 28px;
  line-height: 100px;
  text-align: center;
  border-bottom: 1px solid #e2e2e2;
  font-family: "黑体";
  margin: 0;
  padding: 0;
}

.delTagBox > span {
  width: 49.83%;
  display: inline-block;
  height: 100px;
  text-align: center;
  line-height: 100px;
  font-size: 28px;
  color: #57abed;
}

.delTagBox > span:nth-child(2) {
  border-right: 1px solid #e2e2e2;
}

.search-tags {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
  padding-top: 20px;
  position: relative;
}

.search-tags > li {
  padding: 5px 15px;
  background-color: #f3f4f6;
  border-radius: 30px;
  font-size: 24px;
  margin-right: 15px;
  display: flex;
  margin-bottom: 15px;
}

.search-tags > li > p {
  padding: 0 6px;
}

.search-tags > div {
  padding: 12px 20px;
  background-color: #f3f4f6;
  border-radius: 40px;
  font-size: 24px;
  margin-right: 20px;
  display: flex;
  margin-bottom: 20px;
}

.delAllBg {
  width: 100vw;
  height: 100vh;
  background-color: #000;
  opacity: 0.5;
  position: absolute;
  top: 0;
  left: 0;
}

.delNone {
  display: none;
}

.delBlock {
  width: 30px;
  text-align: center;
}

.yiyingc {
  text-align: center;
  display: none;
  color: #ccc;
}

.simg {
  img {
    width: 750px;
  }
}
</style>

如果你们有更好的代码记得私信我