[TOC] #### Header 组件封装 ~~~ <template> <div class="v-header-wrapper"> <div class="header-left" @click="$emit('clickLeft')" v-if="$slots.left"><slot name="left"></slot></div> <div class="header-center" v-if="$slots.center"><slot name="center"></slot></div> <div class="header-right" @click="$emit('clickRight')" v-if="$slots.right"><slot name="right"></slot></div> <h4 class="header-title" v-if="title"> <span class="header-title-text">{{title}}</span> </h4> </div> </template> <script type="text/ecmascript-6"> export default { name: "VHeader", props: { title: { type: String, default: '' } } } </script> <style lang="stylus" rel="stylesheet/stylus" scoped> @import "~assets/stylus/_mixins.styl"; .v-header-wrapper position relative width 100% height 48px background-color: #fff; box-shadow 0 2px 2px rgba(0,0,0,.15) display flex justify-content space-between .header-left margin-left 10px flex 0 0 40 width 40px height 100% flex-center() font-size 20px /* 兄弟节点 */ ~ .header-right position static .header-center margin 0 10px flex 1 flex-center() height 100% font-size 16px ~ .header-right position static .header-right position absolute right 0 margin-right 10px flex 0 0 40 width 40px height 100% flex-center() font-size 20px .header-title position absolute left 20% right 20% height 100% display flex align-items center text-align center .header-title-text width 100% line-height 1.5 font-size 16px text-overflow: ellipsis overflow: hidden white-space: nowrap </style> ~~~