Vue全家桶开发之音乐播放器爬坑日记

顶部栏的样式

部分代码**

1. 子组件m-header

<template>
    <div class="m-header">
      <div class="icon"></div>
      <h1 class="text">Chicken Music</h1>
      <router-link tag="div" class="mine" to="/user">
        <i class="icon-mine"></i>
      </router-link>
    </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: 'MHeader'
}
</script>
    @import "~common/stylus/variable"
    @import "~common/stylus/mixin"    //用来设置背景色
    .m-header
      position: relative
      height: 44px
      text-align: center
      color: $color-theme
      font-size: 0
      .icon
        display: inline-block
        vertical-align: top
        margin-top: 6px
        width: 30px
        height: 32px
        margin-right: 9px
        bg-image('logo')
        background-size: 30px 32px
      .text
        display: inline-block
        vertical-align: top
        line-height: 44px
        font-size: $font-size-large
      .mine
        position:absolute
        top:0
        right: 0
        .icon-mine
          display: block
          padding: 12px
          font-size: 20px
          color: $color-theme

2.父组件 APP

<template>
  <div id="app">
      <m-header></m-header>
  </div>
</template>

<script type="text/ecmascript-6">
import MHeader from 'components/m-header/m-header'
export default {
  name: 'App',
  components: {
    MHeader
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">  
</style>

效果图

• display的 inline-block是将图标和文字所在的元素设置为行内快元素，使其排在同一行内
• relative使得整个顶部栏脱离文本，不会被覆盖
• position：absolute、top：0、right：0、能强制使该元素在页面的右上角