🤵‍♂️ 个人主页：布说在见 ✍🏻作者简介：
🐋 希望大家多多支持，我们一起进步！😄 如果文章对你有帮助的话， 欢迎评论
💬点赞👍🏻 收藏📂加关注+

借鉴鱼皮的伙伴匹配系统

一、环境准备与项目创建

快速搭建前端框架
已完成npm的安装
1.创建一个文件夹，将其cmd打开

npm init vite@latest

如果暂时不确定，可先选择JavaScript，后续若项目规模扩大，可通过tsc --init逐步添加类型注解，实现 JavaScript 到 TypeScript 的平滑迁移。
若选择 TypeScript，建议在项目中配置tsconfig.json，根据需求调整类型严格程度（如strict: true开启全量类型检查）。
我选择的是TypeScript

如果出现了以下案例，需要修改npm

2.打开web，打开项目，配置运行环境

点击终端，运行指令

npm install

记住要在项目pipei-q运行

运行项目

点击package.json文件.再点击dev。


快速搭建就完成了

二、组件开发

1.导航栏组件开发

创建 layout 目录和 NavBar 组件

创建layout目录，创建
NavBar 导航栏组件，在main.ts中引入。

然后在NavBar.vue中添加导航栏。

最后在APP.Vue中引入导航栏。

运行效果
添加搜索插槽，icon图标样式引用
需要在

<van-nav-bar/>

在 main.ts 中引入并注册导航栏组件

main.ts

刷新页面就可以了

2.NoticeBar 通知栏

新建文件NoticeBar.vue.
在main.ts引入

3.底部Tabbar 标签栏

在vant4中找到Tabbar标签栏，引入样式依赖，和画面代码。

参考

import { createApp } from 'vue';
import { Tabbar, TabbarItem } from 'vant';

const app = createApp();
app.use(Tabbar);
app.use(TabbarItem);

在main.ts添加

运行

三、路由集成与页面开发

npm install vue-router@4

1.Vue Router 安装与配置

main.ts

import { createApp } from 'vue'

import App from './App.vue'
import {Icon,Button,NavBar,NoticeBar,Tabbar, TabbarItem,Toast} from "vant";
// @ts-ignore
import * as VueRouter from 'vue-router';
import routes from "./config/router";


const app =createApp(App);
app.use(Icon);
app.use(Button);
app.use(NavBar);
app.use(NoticeBar);
app.use(Tabbar);
app.use(TabbarItem);
app.use(Toast);


const router = VueRouter.createRouter({
    // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
    history: VueRouter.createWebHashHistory(),
    routes, // `routes: routes` 的缩写
})

app.use(router)
app.mount('#app')

if语句可以不要了。添加路由

2. 搜索页面开发

在vant4找到搜索框
使用事件监听

1.创建SearchPage.vue

2.主页搜索图标跳转路由

3.路由挂载

运行

在搜索页添加
可关闭标签


修改标签

如果只想要主页有这个通知可以，不写到公共的页就行了。

4.添加分类选择在搜索页

5.选择与标签连接

美化一下标签的间隔样式

过滤筛选标签

四、标签筛选功能优化

优化代码后

<template>
  <form action="/">
    <van-search
        v-model="searchValue"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
    />
  </form>
  <van-divider content-position="left">已选标签</van-divider>
  <div v-if="activeIds.length === 0">请选择标签</div>
  <van-row gutter="16" style="padding: 0 16px">
    <van-col v-for="tag in activeIds" :key="tag">
      <van-tag closeable size="medium" type="primary" @close="doclose(tag)">
        {{ tag }}
      </van-tag>
    </van-col>
  </van-row>

  <van-divider content-position="left">选择标签</van-divider>

  <van-tree-select
      v-model:active-id="activeIds"
      v-model:main-active-index="activeIndex"
      :items="filteredTagList"
  />
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { showToast } from 'vant';

// 类型定义
interface TagItem {
  text: string;
  id?: string;
  children?: TagItem[];
  disabled?: boolean;
}

// 搜索值双向绑定
const searchValue = ref('');

// 已选标签ID列表
const activeIds = ref<string[]>([]);

// 树形选择器当前激活索引
const activeIndex = ref(0);

// 原始标签数据
const originTagList: TagItem[] = [
  {
    text: '浙江',
    children: [
      { text: '杭州', id: '杭州' },
      { text: '温州', id: '温州' },
      { text: '宁波', id: '宁波', disabled: true },
    ],
  },
  {
    text: '江苏',
    children: [
      { text: '南京', id: '南京' },
      { text: '无锡', id: '无锡' },
      { text: '徐州', id: '徐州' },
    ],
  },
  { text: '福建', disabled: true },
];

// 过滤后的标签列表（响应式）
const filteredTagList = ref<TagItem[]>([]);

// 初始化时设置过滤列表为原始数据
watch(
    () => originTagList,
    () => {
      filteredTagList.value = [...originTagList];
    },
    { immediate: true }
);

/**
 * 取消搜索
 */
const onCancel = () => {
  showToast('取消');
  searchValue.value = '';
  filterTags(''); // 清空搜索时显示全部标签
};

/**
 * 搜索过滤标签
 * @param searchText 搜索关键词
 */
const onSearch = (searchText: string) => {
  filterTags(searchText.trim());
};

/**
 * 过滤标签的核心逻辑
 * @param keyword 搜索关键词
 */
const filterTags = (keyword: string) => {
  if (!keyword) {
    // 搜索关键词为空时，显示全部标签
    filteredTagList.value = [...originTagList];
    return;
  }

  // 深拷贝原始标签列表进行过滤操作
  filteredTagList.value = originTagList.map(parentTag => {
    const newParentTag = { ...parentTag };

    // 处理有子节点的父标签
    if (newParentTag.children && newParentTag.children.length > 0) {
      newParentTag.children = newParentTag.children.filter(child =>
          child.text.includes(keyword)
      );
    }

    return newParentTag;
  });
};

/**
 * 移除已选标签
 * @param tagId 要移除的标签ID
 */
const doclose = (tagId: string) => {
  activeIds.value = activeIds.value.filter(id => id !== tagId);
};
</script>

<style scoped>
/* 可选：添加自定义样式 */
</style>