Vue全家桶+SSR+Koa2全栈开发美团网⑦—

首页header组件开发

pages目录下的index.vue组件页面默认引用layouts目录下的default.vue模板，所以我们在default.vue模板中直接使用element模板

<template><el-container><el-header>Header</el-header><el-main><nuxt/></el-main><el-footer>Footer</el-footer></el-container>
</template>

default.vue为我们页面展示的入口文件，接下来写header组件部分页面

在components下形成下列目录结构，header目录下的index为header组件的入口文件

geo.vue中写入

<template><div class="m-geo"><i class="el-icon-location">北京市</i><nuxt-link class="changeCity" to="/changeCity">切换城市</nuxt-link>[宁波 温州 上海]</div>
</template>

user.vue中写入

<template><div class="m-user"><template v-if="user">欢迎您，<span class="username">{{user}}</span><nuxt-link to="/exit">退出</nuxt-link></template><template v-else="user"><nuxt-link to="/login" class="login">立即登录</nuxt-link><nuxt-link to="/register" class="register">注册</nuxt-link></template></div>
</template><script>
export default {name: 'user',data () {return {user: ''}}
}
</script>

navbar也同理，这里不再写了

topbar为上面三个组件的父组件，写入

<template><el-row :gutter="0" class="m-header"><el-col :span="5"><geo/></el-col><el-col :span="5"><user/></el-col><el-col :span="14"><navbar/></el-col></el-row>
</template><script>
import Geo from './geo'
import User from './user'
import Navbar from './nav'export default {name: 'index',components: {Geo,User,Navbar}
}
</script>

search.vue中写入

<template><div class="search-panel"><el-row class="m-header-searchbar"><el-col :span="3" class="left"><img src="//s0.meituan.net/bs/fe-web-meituan/e5eeaef/img/logo.png" alt="美团"></el-col><el-col :span="15" class="center"><div class="wrapper"><el-input v-model="search" @focus="focus" @blur="blur" @input="input" placeholder="搜索商家或地点"></el-input><button class="el-button el-button--primary"><i class="el-icon-search"></i></button><dl class="hotPlace" v-if="isHotPlace"><dt>热门搜索</dt><dd v-for="(item,index) of hotPlace" :key="index">{{item}}</dd></dl><dl class="searchList" v-if="isSearchList"><dd v-for="(item,index) of searchList" :key="index">{{item}}</dd></dl></div><p class="suggest"><a href="#">故宫博物院</a><a href="#">故宫博物院</a><a href="#">故宫博物院</a><a href="#">故宫博物院</a><a href="#">故宫博物院</a></p><ul class="nav"><li><nuxt-link to="/" class="takeout">美团外卖</nuxt-link></li><li><nuxt-link to="/" class="movie">猫眼电影</nuxt-link></li><li><nuxt-link to="/" class="hotel">美团酒店</nuxt-link></li><li><nuxt-link to="/" class="apartment">民宿/公寓</nuxt-link></li><li><nuxt-link to="/" class="business">商家入驻</nuxt-link></li></ul></el-col><el-col :span="6" class="right"><ul class="security"><li><i class="refund"><p class="txt">随时退</p></i></li><li><i class="single"><p class="txt">不满意免单</p></i></li><li><i class="overdue"><p class="txt">过期退</p></i></li></ul></el-col></el-row></div>
</template><script>
export default {name: 'search',data () {return {search: '',isFocus: false,hotPlace: ['火锅', '火锅', '火锅', '火锅', '火锅'],searchList: ['火锅', '火锅']}},computed: {isHotPlace () {return this.isFocus === true && !this.search},isSearchList () {return this.isFocus === true && this.search}},methods: {focus () {this.isFocus = true},blur () {setTimeout(() => {this.isFocus = false}, 200)},input(){console.log('input')}}
}
</script>

index.vue为header的入口组件，由上面2个子组件组成，写入

<template><div class="m-header"><el-row><el-col><top-bar/></el-col></el-row><el-row><el-col><search-bar/></el-col></el-row></div></template><script>
import topBar from './topbar'
import searchBar from './searchbar'
export default {name: 'index',components:{topBar,searchBar}
}
</script><style lang="scss">@import "./../../../assets/css/public/layout.scss";@import "./../../../assets/css/public/header/index.scss";
</style>

总结：

输入框的获得焦点触发事件 @focus = ‘focus’，失去焦点触发事件 @blur = ‘blur’，获得输入框内容改变时触发事件 @input = ‘input’

v-model可以绑定输入框的内容，与data中的search数据双向绑定

当搜索列表被点击时，输入框先失去焦点，会造成搜索列表内没有被点击的假象，使用setTimeOut延时点击

首页菜单组件Emenu开发

首页中header和footer都是模板，所以在default.vue中开发

但菜单组件唯一，所以在pages目录下的index.vue中导入菜单组件，写入

<template><div class="page-index"><el-row><el-col :span="5"><emenu/></el-col><el-col :span="19">2</el-col></el-row><el-row :span="24">3</el-row></div>
</template><script>
import Emenu from '@/components/index/menu'
export default {components: {Emenu}
}
</script>

菜单组件Emenu.vue中写入

<template><div class="m-menu"><dl class="nav" @mouseleave="mouseleave"><dt>全部分类</dt><dd v-for="(item,index) of menu" :key="index" @mouseenter="enter"><i :class=item.type></i>>{{item.name}}<span class="arrow"></span></dd></dl><div class="detail" v-if="kind" @mouseenter="detailEnter" @mouseleave="detailLeave"><template v-for="item of curdetail.child"><h4>{{item.title}}</h4><span v-for="v of item.child" :key="v">{{v}}</span></template></div></div>
</template><script>
export default {data () {return {kind: '',menu: [{type: 'food',name: '美食',child: [{title: '美食',child: ['代金券', '甜点饮品']}]}, {type: 'takeout',name: '外卖',child: [{title: '美食',child: ['代金券', '酒店']}]}]}},computed: {curdetail () {return this.menu.filter((item) =>item.type === this.kind)[0]}},methods: {mouseleave () {this.timer = setTimeout(() => {this.kind = ''}, 150)},enter (e) {this.kind = e.target.querySelector('i').className},detailEnter () {clearTimeout(this.timer)},detailLeave () {this.kind = ''}}
}
</script>

总结：

鼠标进入时触发事件@mouseenter="enter"，鼠标离开时触发事件@mouseleave="mouseleave"

定义vue实例中的全局变量可以使用this.变量，如上面this.timer = setTimeout(() => {this.kind = ''}, 150)，this.timer就可以在其他方法中使用，清除setTimeout可以使用clearTimeout(this.timer)

Vue全家桶+SSR+Koa2全栈开发美团网⑦——首页开发相关推荐

【Vue全家桶+SSR+Koa2全栈开发】项目搭建过程整合学习目录（持续更新中）
写在开头大家好,这里是lionLoveVue,基础知识决定了编程思维,学如逆水行舟,不进则退.金三银四,为了面试也还在慢慢积累知识,Github上面可以直接查看所有前端知识点梳理,github传送门 ...
Vue全家桶+SSR+Koa2全栈开发美团网笔记
实战准备 1.环境准备与项目安装 node 8.12 npm 6.4.1 vue 2.5.17 webpack 4.19 nuxt 2.0.0 1. npm install -g npx 2. npx ...
Vue全家桶+SSR+Koa2全栈开发美团网⑧——首页登录注册
在pages目录下新建register.vue,点击注册按钮就能跳转至http://localhost:3000/register,因为在user.vue中写过 <nuxt-link to=&q ...
Vue全家桶+SSR+Koa2全栈开发美团网③——mongoose基础
先安装mongoDB,启动数据库然后安装mongoDB可视化数据管理工具Robo 3T 还是在koa2项目下安装mongoose npm i mongoose 在koa2根目录下新建一个dbs文件夹 ...
Vue全家桶+MongoDB+Koa2全栈开发网站
github网址MT-PC 实战准备项目安装: npm install -g npx npx create-nuxt-app project-name npm install --update-bi ...
实战：Vue全家桶+SSR+Koa2实现美团网
目录项目演示地址 [高仿美团网](http://mt-app.qkongtao.cn/) 源码下载 [码云](https://gitee.com/KT1205529635/mt-app) 项目介绍 ...
基于Vue全家桶制作的的高仿美团APP
美团外卖APP ? 项目演示地址:http://39.108.232.27:9000 ? GitHub:github.com/bxm0927/vue- 基于 Vue 全家桶 (2.x) 制作的美团外卖 ...
vue全家桶+koa2+mongoDB打造全栈社区博客
背景一直以来都想自己编写一个自己的社区博客,后来在网上找了一下,最后决定参考慕课网的一个社区项目,决定改用vue2.6+AntdForVue+koa2+mongoose实现一套社区博客. 简介这是 ...
vue全家桶开发的一些小技巧和注意事项
作者:沉末_ https://juejin.im/user/5b7c1be9e51d4538b35bfc32 前言用vue全家桶开发一年多了,踩过不少坑,也解决了很多的问题,把其中的一些点记录下来, ...

Vue全家桶+SSR+Koa2全栈开发美团网⑦——首页开发

首页header组件开发

首页菜单组件Emenu开发

Vue全家桶+SSR+Koa2全栈开发美团网⑦——首页开发相关推荐

最新文章

热门文章