Vue3折叠搜索框：简洁优化，合理控制搜索范围

2024-02-17 11:18:21

在当今快节奏的信息时代，网站和应用程序中常常会面临大量搜索项需要展示的问题。如何合理控制搜索范围，使信息查找更加便捷，是前端开发人员面临的重要挑战之一。本文将介绍如何使用Vue3轻松实现搜索项超过指定行数时折叠的功能，帮助用户快速定位所需信息，优化搜索体验。

实现效果

当搜索项数量超过指定行数时，搜索框会自动折叠，只显示有限数量的搜索项。点击“展开”按钮，即可展开所有搜索项。

实现思路

实现搜索项折叠功能，需要以下几个步骤：

实现组件的布局。
绑定监听事件和销毁监听事件。
高度判断和图标的显示与隐藏。
实现组件的布

代码实现

<template>
  <div class="search-box">
    <input type="text" placeholder="Search" v-model="searchText" @input="handleInput">
    <button v-if="isFolded" @click="toggleFolded">Expand</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const searchText = ref('')
    const isFolded = ref(false)

    const handleInput = () => {
      if (searchText.value.length > 10) {
        isFolded.value = true
      } else {
        isFolded.value = false
      }
    }

    const toggleFolded = () => {
      isFolded.value = !isFolded.value
    }

    return {
      searchText,
      isFolded,
      handleInput,
      toggleFolded
    }
  }
}
</script>

<style>
.search-box {
  display: flex;
  align-items: center;
}

.search-box input {
  width: 200px;
  height: 30px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.search-box button {
  margin-left: 10px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  cursor: pointer;
}

.search-box button:hover {
  background-color: #f5f5f5;
}

.folded {
  height: 30px;
  overflow: hidden;
}
</style>