如何在 Vue 中创建搜索栏

目录

• 设置 Vue
• 在 Vue 中创建搜索栏组件
• 添加数据和逻辑
• 导入搜索图标
• 样式化搜索栏
• 在 Vue 中测试搜索栏

互联网是一个巨大的信息海洋。为了轻松找到我们正在寻找的信息，我们依靠搜索栏，几乎每个应用程序或网站都使用了搜索栏。

在本教程中，我们将在 Vue.js 中构建一个自定义搜索栏，这是一个非常有用的 JavaScript 框架，用于构建快速、轻量级的用户界面。

搜索栏有许多不同的形状和形式。我们的搜索栏示例将过滤现有的水果列表，您将学习如何构建布局、创建逻辑和设置搜索栏样式。

在我们的例子中，不会有任何复杂的算法来处理搜索查询，但我们将使用一个简单的函数来过滤掉用户输入的查询的结果。

为了改善用户体验，结果将实时返回，这意味着它们将随着用户键入而更新，无需单击任何内容即可提交搜索查询以执行。

当搜索查询没有结果时，我们还将通过向用户发送消息来反馈。

设置 Vue

首先，在终端中运行 npm init vue@latest 这将执行 create-vue，这是 Vue 的官方脚手架工具，用于创建功能齐全的 Vue 项目。

您将被要求在终端中为您的项目命名。让我们调用我们的应用程序 vue-search-app。当被要求进一步配置项目时，按 Enter 键以获取所有选项。

之后，运行 cd vue-search-app 和 npm install 为项目设置所有必要的依赖项。

接下来，运行 npm run dev，它将为您的新 Vue 应用程序启动一个开发服务器。您可以通过在浏览器中打开 http://localhost:3000 来访问它。

在 Vue 中创建搜索栏组件

导航到 src 文件夹并找到 App.vue 文件。我们将从头开始编写所有内容，因此请确保您首先从 App.vue 中删除所有内容。然后，包含以下代码：

<template>
   <input type="text" v-model="input" placeholder="Search fruits..." />
  <div class="item fruit" v-for="fruit in filteredList()" :key="fruit">
    <p>{{ fruit }}</p>
  </div>
  <div class="item error" v-if="input&&!filteredList().length">
     <p>No results found!</p>
  </div>
</template>

在 Vue 中，所有的单文件组件都必须包含在模板标签中。 Vue 会将其中的所有内容编译到 Virtual DOM 中。

我们还创建了输入字段本身。我们将类型设置为文本，因为我们将在其中输入搜索查询。我们还为其添加了一个内置指令 v-model，这将允许我们在键入的值和数据属性之间创建双向绑定。我们还包括一个自定义占位符值，提示用户执行搜索操作。

然后，我们创建了将返回的搜索项。我们使用内置的 v-for 指令基于水果数组呈现段落中的项目列表，我们将在下一节中创建该数组。我们还传递了 :key 属性，这是在 VueJS 中循环元素时推荐的做法。

最后，我们创建了一个错误元素，如果搜索查询没有结果，将显示该元素。为此，我们使用内置的 v-if 指令来检查是否有输入输入并且过滤器函数没有结果。如果两个条件都满足，则渲染元素。

对于这两个 div 元素，我们还包含了类属性，因此我们可以稍后为它们设置样式。它们都将包含 item 类，而fruit 和 error 类将用于分配不同的样式规则。

添加数据和逻辑

为了向组件添加数据和逻辑，我们将编写一些 JavaScript。 Vue 允许我们通过将其包装在 <script> 标记中来将其写入同一个 App.vue 文件中。

在我们之前创建的模板标签下，包含以下代码：

<script setup>
import { ref } from "vue";
let input = ref("");
const fruits = ["apple", "banana", "orange"];
function filteredList() {
  return fruits.filter((fruit) =>
    fruit.toLowerCase().includes(input.value.toLowerCase())
  );
}
</script>

我们首先将设置包含在开始的 <script> 标记中，这是 Vue v3.2 中引入的编译时语法糖，它允许我们编写更少样板的代码。

然后，我们导入了 ref 属性，它将让我们将用户输入存储在搜索栏中。我们创建了一个新的变量输入，它将使用导入的 ref 来解决这个问题。

接下来，我们创建了水果数组，它将保存我们将循环遍历的数据。通常，数据来自数据库，但在本教程中，我们将使用简单的虚拟数据。

最后，我们创建了一个过滤列表函数，它将再次检查水果数组中每个单词中的用户输入，并仅返回那些包含搜索查询的元素。 如果我们检查浏览器，现在应该会看到一个无样式的功能搜索栏。

导入搜索图标

Vue 对项目中的资产使用简单的文件结构。在 src 中，您会找到 assets 文件夹，您可以在其中包含要使用的静态资产。要访问它们，只需提供文件的路径，例如 App.vue 中的 assets/image.svg。

在我们的应用程序中，我们将使用 SVG 搜索图标来使搜索输入区域更吸引眼球，并通过突出显示搜索输入区域来改进 UI。您可以在 svgrepo.com 或 flaticon.com 等网站上下载一些不错的搜索图标。

下载后，将图标重命名为 search-icon.svg 并将其放入 assets 文件夹中。

样式化搜索栏

我们可以直接在 App.vue 文件中设置搜索栏的样式。唯一的要求是所有样式规则都必须包含在 <style> 标记内。

在我们之前创建的 <script> 标签下，包含以下样式规则：

<style>
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
}

body {
  padding: 20px;
  min-height: 100vh;
  background-color: rgb(234, 242, 255);
}

input {
  display: block;
  width: 350px;
  margin: 20px auto;
  padding: 10px 45px;
  background: white url("assets/search-icon.svg") no-repeat 15px center;
  background-size: 15px 15px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
    rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

.item {
  width: 350px;
  margin: 0 auto 10px auto;
  padding: 10px 20px;
  color: white;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
    rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

.fruit {
  background-color: rgb(97, 62, 252);
  cursor: pointer;
}

.error {
  background-color: tomato;
}
</style>

在样式规则的顶部，我们使用 import 语法来导入 Montserrat 字体，以便我们可以在搜索组件中使用它。您可以在 Google 字体的众多替代品中选择一种——它们都是免费的。

然后，我们为应用程序中使用的所有元素创建了自定义重置规则，这样就没有样式的默认值，并且应用程序在所有浏览器上看起来都一样。我们删除了默认的内边距和边距，并将 box-sizing 设置为在宽度和高度中包含内边距和外边距，并将每个元素设置为使用导入的蒙特塞拉特字体。

然后，我们将主体设置为使用屏幕的整个高度，为其添加一些填充，并将背景颜色设置为浅蓝色。

对于输入元素，我们设置了具体的宽度，添加了一些边距和内边距，并设置了字体大小。我们使用 background 属性设置背景颜色，导入搜索图标，并将其定位在输入字段中。我们还移除了自定义边框，将边角设置为略微圆角，并为输入添加了漂亮的阴影效果。

对于返回的元素，我们设置了特定的宽度并添加了一些边距和填充。我们将角落设置为略微圆润并包含阴影效果，并将字体颜色设置为白色。

最后，我们为水果和错误提供了一些单独的背景颜色样式规则，并将光标悬停在水果项目上时变为指针。

测试 Vue 中的搜索栏

现在，检查您的开发服务器是否仍在运行。如果是，请访问浏览器并再次打开 http://localhost:3000。如果服务器不工作，请先运行命令 npm run dev。

您应该看到一个功能齐全且经过精心设计的搜索栏，可以让您在编写时过滤掉项目。尝试用真实值和错误值对其进行测试，看看它是否能处理这两种情况：