前言
这期写了好久,代码写的很爽,可是要写笔记就麻烦一点。
效果是我一点点调试出来的,由于是文章就不一点点带大家调试,我只说主体结构,剩下的细节大家看我具体代码好了。(有机会出个视频)
在csdn中,顶部栏存在于各个页面,无论是首页,还是文章详情页面。那么就涉及到一个组件的复用问题。
项目地址:https://github.com/cctyl/sunofbeach_mobile
分析
显然这个不是一个路由组件,因为我们不通过url来访问顶部栏,那就是普通组件。
所以,我们在components目录下创建一个Header.vue组件,内容暂时不写
为了实现各个页面都显示顶部栏的效果,那么他应该放在App.vue中。
我们在App.vue中引入此组件
查看页面效果
编写Header样式结构
我们看下Header的组成
最左边是一个图标,中间是一个搜索框,右边是一个登录后的个人头像,没登录情况下展示的是一个登录文字,最右边的一个功能菜单,我们之后再做。
我们开始制作。
既然引入了nutui,那比不可能自己重新写。
首先给最外层套一个flex容器,使用 https://nutui.jd.com/2x/#/flex
<nut-row>
<nut-col :span="6">
<div class="flex-content">span:6</div>
</nut-col>
<nut-col :span="6">
<div class="flex-content flex-content-light">span:6</div>
</nut-col>
<nut-col :span="6">
<div class="flex-content">span:6</div>
</nut-col>
<nut-col :span="6">
<div class="flex-content flex-content-light">span:6</div>
</nut-col>
</nut-row>
上面的每一个nut-col就是一列,span就是占多少,总宽度为24,由span属性决定此col占多少宽度。
Header的每个部分都写到那nut-col中。
首先是logo部分,查看sunofbeach,发现logo并不是一张图片,而是普通文字放大的效果,我们也模仿一个:
<nut-col :span="3">
<div class="flex-content logo">
SOB
</div>
</nut-col>
.logo{
text-align: center;
height: 26px;
line-height: 36px;
font-size: 19px;
color: #37f;
margin-left: -5px;
}
接下来是搜索框,我们就不自己写了,直接使用nutui的搜索框
https://nutui.jd.com/2x/#/searchbar
然后是一个登录按钮,具体逻辑我们还没写到,暂时只写个文本,调整一下样式。
最右边的more按钮,用iconfont的图标来代替,图标就是文字,调整文字大小让他居中。 icon-more
最终的效果是这样的
具体代码如下所示:
<template>
<div class="container">
<nut-row>
<nut-col :span="3">
<div class="flex-content logo">
SOB
</div>
</nut-col>
<nut-col :span="16">
<div class="flex-content flex-content-light">
<nut-searchbar
v-model="val"
placeText="请输入自定义文案"
></nut-searchbar>
</div>
</nut-col>
<nut-col :span="3">
<div class="flex-content loginText">登录</div>
</nut-col>
<nut-col :span="1">
<span class="iconfont icon-more"></span>
</nut-col>
</nut-row>
</div>
</template>
<script>
export default {
name: "Header.vue"
}
</script>
<style scoped>
.container{
padding: 10px 5px;
}
.logo{
text-align: center;
height: 26px;
line-height: 36px;
font-size: 19px;
color: #37f;
margin-left: -5px;
}
.loginText{
height: 26px;
line-height: 36px;
margin-left: 9px;
}
.icon-more{
height: 26px;
line-height: 36px;
vertical-align: middle;
}
</style>