仿拉勾网第三篇--首页搜索框制作嗨，小伙伴们好久不见！今天要跟大家分享的是拉勾网首页中的搜索区域的制作。搜索区域实现功能

嗨，小伙伴们好久不见！今天要跟大家分享的是拉勾网首页中的搜索区域的制作。搜索区域实现功能是：点击搜索框，会出现推荐搜索框。鼠标悬停在推荐搜索框里的数据中时，会有背景颜色变化。

一、搜索区域准备工作

1. 准备分支和文件夹

使用git指令：git checkout -b serch-bar，创建并切换到serch-bar分支（糟糕！！写文章的时候才发现自己项目里创建的文件夹和分支名都写成了serch，正确的应该是search，大家别像我一样写错啦）。创建完分支后，我们就可以准备文件夹了。在components文件夹下创建一个文件夹，命名为serch-bar, 其下创建index.vue文件，我们的搜索框区域就在这里写啦~

2. 引入到首页index.vue文件

搜索区域是要在首页页面中出现的，所以可以直接在创建完搜索框区域index.vue文件以后，将其引入到首页index文件夹的index.vue里。

二、搜索区域代码部分

1. template区域html代码

用input输入框设计搜索框，输入框默认提示词为“搜索职位、公司或地点”，还有一个搜索点击按钮。再设计一个鼠标停在输入框时会出现的div盒子，里面放“猜你要搜”的内容。此div使用v-if设置默认隐藏，在input输入框绑定鼠标focus和blur事件，实现猜你要搜div盒子的出现与隐藏。

<template>
    <div class="bg-box">
        <div class="serch-box">
            <input type="text" placeholder="搜索职位、公司或地点" @focus="showList(true)" @blur="showList(false)">
            <button type="button" class="layui-btn layui-btn-lg">搜索</button>
            <div class="recommend-serch" v-if="state">
                <p class="rec-title">猜你要搜</p>
                <ul class="rec-names" v-for="title in recommendList" :key="title.index">
                    <li><a href="#">{{title}}</a></li>
                </ul>
            </div>
        </div>
    </div>
</template>

2. script区域代码

其中，设置猜你要搜div盒子默认隐藏的就是data里面的state，而data里的isShowList设置为false也是隐藏，这个是为了方便focus和blur事件更好地触发安排的。

<script>
export default {
  data() {
    return {
      recommendList: [
        "java",
        "ui",
        "前端",
        "运营",
        "大数据",
        "ios",
        "andriod",
        "php",
        "phthon",
        "测试",
      ],
      state: false,
      isShowList: false,
    };
  },
  methods: {
    showList(state) {
      if (state) {
        this.state = state;
      } else {
        if (this.isShowList) {
          this.isShowList = false;
          this.$refs.focus();
        } else {
          this.state = state;
        }
      }
    },
  },
};
</script>

3. css代码

<style scoped>
.bg-box {
  position: relative;
  height: 140px;
  background: #f2f5f4;
  z-index: 1;
}
.serch-box {
  position: absolute;
  top: 20%;
  left: 18%;
}
.serch-box input {
  width: 1000px;
  height: 60px;
  font-size: 22px;
  padding-left: 20px;
}
.serch-box input:focus {
  border-style: solid;
  border-color: #00b38a;
}
.serch-box .layui-btn-lg {
  position: absolute;
  top: 0%;
  width: 180px;
  height: 64px;
  line-height: 64px;
  border: 0;
  padding: 0;
  font-size: 22px;
  background-color: #00b38a;
}
.recommend-serch {
  width: 1050px;
  height: 550px;
  background-color: #fff;
  border: 1px solid rgb(140, 140, 140);
}
.recommend-serch {
  padding-top: 8px;
}
.recommend-serch .rec-title {
  padding-left: 20px;
  color: #999;
  font-size: 20px;
}
.recommend-serch .rec-names li {
  height: 50px;
  padding-left: 20px;
}
.recommend-serch .rec-names li a {
  display: block;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
}
.recommend-serch .rec-names li:hover,
.recommend-serch .rec-names li a:hover {
  background-color: #00b38a;
  color: #fff;
}
</style>

三、搜索框区域成果展示

通过观察整个网站布局我们能清楚地知道，搜索框区域在好几个地方都会用到，所以我是给搜索框区域单独开了一个分支和文件夹，以便后续重复利用。

四、结语

搜索框区域的分享就到这里啦，大家有疑问的地方可以留言，如果有修改建议也欢迎私信或留言呀！拜拜~~~

仿拉勾网第三篇--首页搜索框制作