写一个头部组件
<template>
<header class="header">
<slot name="left"></slot> //插槽占位 识别用不同的name属性
<a class="header_title">
<span class="header_title_text ellipsis">{{title}}</span>
</a>
<slot name="right"></slot>
</header>
</template>
<script>
export default {
props: {
title:String //接收属性
},
}
</script>
<style lang="stylus" scoped>
.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>
怎么用
<template>
<div class="msite">
<!--首页头部-->
<HeaderTop :title="address.name"> //传title值
<a class="header_search" slot="left"> left对应的name属性slot标签
<i class="iconfont icon-sousuo"></i>
</a>
<a class="header_login" slot="right"> right对应的name属性slot标签
<span class="header_login_text">登录|注册</span>
</a>
</HeaderTop>
</template>
import HeaderTop from "../../components/HeaderTop/HeaderTop.vue" //引入
export default {
components: {
HeaderTop, //印射成标签
}
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。