「这是我参与2022首次更文挑战的第6天，活动详情查看：2022首次更文挑战」。
前言
大家好，今天继续来完善我们的网页版掘金app。上一篇文章中我们已经实现了对axios的二次封装、服务端框架的搭建及后端接口的封装、最后还通过前后端交互并实现了tab标签类别的动态获取及绑定，离成功又近了一步。本次分享中我们将实现如下功能：
- 点击搜素栏跳转到搜索页
- 搜索组件分析及封装
- 点击返回按钮返回到首页
搜索页面切换
在前面的文章中我们已经对搜索栏进行了分析：首页中的搜索栏看上去是一个搜索栏，然而事实并非如此，当我们点击搜索栏时不能输入任何信息，同样也不能实现搜索功能，而是在点击后跳转到了一个新页面，而真正的搜索功能是在新的搜索页面中实现的，如下图所示：
另外，在我们的网页版app中的搜索栏是一个真正的搜索栏，只不过是我们把它的状态设置成了禁用状态，但由此也引出了一个新的问题：“当我们给搜索栏绑定点击事件时并不会生效，这是因为整个搜索栏都是禁用的，因此绑定任何事件也就不会生效”。这就需要想其它办法来绕过它，其实也不难，我们只需要给搜索框的外面套一层div标签，然后把事件绑定给div就可以完美实现了。具体实现步骤如下：
- 在views下新增一个Search.vue组件，组件内容与首页类似，也是由顶部搜索栏和tab标签页组成，不同的是这个搜索框是一个真正的搜索并且两边分别有一个返回按钮和搜索按钮，下面是5个tab标签页。在官方网站上找了一下没有找到获取tab标签的接口，因此我们这里就直接固定写死即可。我们同样使用vant库中的导航栏navbar组件实现
- 同样添加一个van-nav-bar组件，设置left-arrow属性为true，即显示返回按钮
- 在van-nav-bar中定义一个#title插槽并添加一个van-search组件（可参考首页中的van-search）
- 在van-nav-bar中定义一个#right插槽并添加搜索按钮
- 给van-nav-bar分别绑定click-left和click-right事件，分别用于返回到首页和搜索内容
- 在Search.vue的javascript代码中分别定义back和search两个函数对应着click-left和click-right
- 添加van-tabs标签组件。需要注意的是五个tab标签分别对应着不同的id_type，这个值后续需要作为参数传递给后台，对应的值已经分析得出，会在下面直接写在代码中
<!--Search.vue-->
<template>
<van-nav-bar left-arrow @click-left="back" @click-right="search">
<template #title>
<div>
<van-search placeholder="搜索稀土掘金" />
</div>
</template>
<template #right> <van-icon name="search" size="28" />搜索</template>
</van-nav-bar>
<van-tabs
v-model:active="active"
sticky
swipeable
color="#0176fa"
title-active-color="#0176fa"
>
<van-tab v-for="item in categoryList" :key="item.id" :title="item.text">
<div class="tab-list-content">{{ item.text }}</div>
</van-tab>
</van-tabs>
</template>
// Search.vue
import { ref } from "vue";
import {useRouter} from 'vue-router'
export default {
setup(){
const active = ref(0);
const categoryList = [
{ id: 0, text: "综合" },
{ id: 2, text: "文章" },
{ id: 12, text: "课程" },
{ id: 9, text: "标签" },
{ id: 1, text: "用户" },
];
const router = useRouter();
const back = function back(){
router.push("/");
}
const search = function search(){
console.log('搜索稀土掘金');
}
return {
active,
back,
search,
categoryList,
}
}
}
- 给Search.vue组件配置对应的路由信息
// router/index.js
// ...省略
{
path:'/search',
name:"Search",
component:()=>import(/*webpackChunkName:"Search"*/ '../views/Search.vue')
}
//...省略
- 修改Home.vue，在van-search组件的外层套一个div标签并绑定click事件
- 在Home.vue的javascript代码中定义一个search函数用于处理div的click事件，点击后跳转到search.vue中
<!--Home.vue-->
<!--省略-->
<template #title>
<div @click="search"><!--新增内容-->
<van-search placeholder="搜索稀土掘金" disabled />
</div>
</template>
<!--省略-->
//Home.vue
// 省略...
import {useRouter} from 'vue-router'
setup(){
const router = useRouter();
const search = function(){
router.push('/search')
}
return{
search
}
}
// 省略...
到此就实现了Search.vue组件的封装，以及首页和search页之间的互相切换功能。具体效果图如下：
总结
本次分享中我们分析了如何绕过禁用状态的组件绑定click事件，同时也分析了新的搜索页面的组成部分，并实现了首页和搜索页面的互相切换，以及搜索页面中的标签数据分析及绑定。今天的分享就到这里了，喜欢的小伙伴欢迎点赞加关注哦！
