vue2 实现搜索定位和回到顶部

vue2 实现搜索定位和回到顶部

• 动态绑定唯一值 :ref="item-${item.name}"

<template>
    <div class="app-container">
        <el-row :gutter="10" class="mb8 fixed-header">
            <el-col :span="5">
                <el-input v-model.trim="searchQuery" placeholder="请输入名称" clearable size="small"
                    @keyup.enter.native="handleQuery" />
            </el-col>
            <el-col :span="1.5">
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-col>
        </el-row>

        <div v-if="calList.length > 0" style=" height:730px; position: relative; overflow-x: auto;">
            <div :data="calList" v-for="(item) in calList" :key="item.itemCode" :ref="`item-${item.name}`"
                class="card_style">
                <el-card style="width: 240px; position: sticky; left: 0; z-index: 2;">
                    <div class="text-center">
                        <el-image class="small-img circle-img" :src="item.img" :preview-src-list="[item.img]"
                            style="width: 80px; " />
                    </div>
                    <ul class="list-group list-group-striped">
                        <li class="list-group-item">
                            商品名称
                            <el-tooltip class="item" effect="dark" :content=item.name placement="top">
                                <div class="pull-right"> {{ item.name }}</div>
                            </el-tooltip>
                        </li>
                        <li class="list-group-item">
                            商品价格(¥)
                            <div class="pull-right"> {{ item.price }}</div>
                        </li>
                    </ul>
                </el-card>
            </div>
        </div>

    </div>
</template>

• 搜索方法

搜索到该商品信息，页面滚动到该商品行，未查询到返回失败信息
清空搜索条件时，页面回到列表第一行

<script name="">
export default {
    name: "",
    data() {
        return {
            calList: [],
            searchQuery: ''
        }
    },

    methods: {
        handleQuery() {
            if (!this.searchQuery) return

            const targetItem = this.calList.find(item => item.name.includes(this.searchQuery))

            if (targetItem) {
                const targetElement = this.$refs[`item-${targetItem.name}`]
                if (targetElement  && targetElement[0]) {
                    targetElement[0].scrollIntoView({ behavior: 'smooth', block: 'start' })
                }
            } else {
                this.$modal.msgError("未找到商品！")
            }
        },

        resetQuery() {
            this.searchQuery = ''
            const firstItem = this.$refs['item-' + this.calList[0].name]
            if (firstItem && firstItem[0]) {
                firstItem[0].scrollIntoView({ behavior: 'smooth', block: 'start' });
            }
        }
    }
}
</script>