[Vue3+Ts]搜索添加历史记录

<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="delAllTags">删除</span>
            </div>
            <div class="delAllBg"></div>
        </div>
    </div>
</template>

less

<style lang="less" scoped>
.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 {
    padding-left: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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

.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;
    border-radius: 20px;
}

.delTagBox>p {
    font-size: 28px;
    line-height: 100px;
    text-align: center;
    border-bottom: 1px solid #b5b5b5;
    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;
}

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


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

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

.search-tags>div {
    padding: 0 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;
}

.like {
    width: 750px;
    height: 543px;

    img {
        width: 750px;
        height: 543px;
    }
}
</style>

ts

<script lang="ts" setup>
import { ref } from "@vue/reactivity";


const lc = ref<HTMLDivElement>()
const Getlc = () => lc.value as HTMLDivElement
const rc = ref<HTMLDivElement>()
const Getrc = () => rc.value as HTMLDivElement
const line = ref<HTMLDivElement>()
const Getline = () => line.value as HTMLDivElement
let x = 0; let disx = 0;
let num1 = ref<number>(0)
let num2 = ref<number>(100)
const Fn = (item: HTMLDivElement, e: TouchEvent) => {
    disx = e.changedTouches[0].pageX - item.offsetLeft
    item.ontouchmove = (e: TouchEvent) => {
        x = e.changedTouches[0].pageX - disx
        if (x < 0) x = 0; if (x > 225) x = 225;
        item.style.left = x + 'px'
        if (Getrc().offsetLeft >= Getlc().offsetLeft) {
            Getline().style.width = Getrc().offsetLeft - Getlc().offsetLeft + 25 + 'px'
            Getline().style.left = Getlc().offsetLeft + 'px'
        } else {
            Getline().style.width = Getlc().offsetLeft - Getrc().offsetLeft + 25 + 'px'
            Getline().style.left = Getrc().offsetLeft + 'px'
        }
        if (item.classList[1] === 'lc') num1.value = Math.floor(Getlc().offsetLeft / 2.25)
        if (item.classList[1] === 'rc') num2.value = Math.floor(Getrc().offsetLeft / 2.25)


    }
}
</script>