搜索实现vue+Element-ui仿商城搜索

最新推荐文章于 2023-11-09 16:50:42 发布

风继续吹&

最新推荐文章于 2023-11-09 16:50:42 发布

阅读量522

点赞数

分类专栏： vue.js 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_48930299/article/details/118487271

版权

本文介绍了如何在Vue.js项目中结合Element-UI实现商城搜索功能，特别关注了利用vuex进行数据持久化的步骤。首先，需要安装vuex，然后在store配置中引入vuex-persistedstate插件，将其作为plugins之一进行应用，确保vuex的状态在刷新后仍能保持。

摘要由CSDN通过智能技术生成

在这里插入图片描述

<template>
  <div>
    <!-- 搜索框开始 -->
    <van-search
      v-model="kw"
      shape="round"
      placeholder="请输入搜索关键词"
      show-action
      autofocus
      @input="searchInput"
    >
      <template #action>
        <div class="search">
          <van-button size="mini" type="danger" style="border-radius: 5px"
            >搜索</van-button
          >
        </div>
      </template>

      <template #left>
        <van-icon
          name="arrow-left"
          @click="back"
          style="font-size: 25px; margin-right: 10px; color: #888"
        />
      </template>

      <template #label>
        <span class="login-text">JD</span>
      </template>
    </van-search>
    <!-- 搜索框结束 -->

    <!-- 搜索记录开始 -->
    <div class="history-body">
      <div class="history-title">
        <span>最近搜索</span>
        <van-icon name="delete" @click="del" />
      </div>

      <div