1.左右使用slot作为内容插槽【传递标签】
2.中间标题使用props方式传参 【传递数据】
3.HeaderTop.vue
<template>
<header class="header">
<slot name="left"></slot>
<span class="header_title">
<span class="header_title_text ellipsis">{{title}}</span>
</span>
<slot name="right"></slot>
</header>
</template>
<script>
export default {
props: {
title: String
},
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
.header
background-color #02a774
position fixed
z-index 100
left 0
top 0
width 100%
height 45px
.header_search
position absolute
left 15px
top 50%
transform translateY(-50%)
width 10%
height 50%
.icon-sousuo
font-size 25px
color #fff
.header_title
position absolute
top 50%
left 50%
transform translate(-50%, -50%)
width 50%
color #fff
text-align center
.header_title_text
font-size 20px
color #fff
display block
.header_login
font-size 14px
color #fff
position absolute
right 15px
top 50%
transform translateY(-50%)
.header_login_text
color #fff
</style>
4.使用方法
插槽中写好slot=“left”来放置位置
<!--首页头部-->
<HeaderTop :title="address.name">
<router-link class="header_search" slot="left" to="/search">
<i class="iconfont icon-sousuo"></i>
</router-link>
<router-link class="header_login" slot="right" :to="userInfo._id ? '/userinfo': '/login'">
<span class="header_login_text" v-if="!userInfo._id">
登录|注册
</span>
<span class="header_login_text" v-else>
<i class="iconfont icon-person"></i>
</span>
</router-link>
</HeaderTop>