vue 外卖app 利用slot分发内容

Posted 2021-01-03 1点

1. 增加一个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>

　　2.Home.vue

引入 HeaderTop

import HeaderTop from ‘../../components/HeaderTop/HeaderTop.vue‘

　　3.

3..Home.vue    映射成标签

export  default  {
  //映射成标签
   components:{
     HeaderTop
   }
}

　4..Home.vue使用，利用slot 分发左右两边的内容，通过绑定title 声明中间部分的文字

<HeaderTop title="昌平区北七家宏福科技园(337省道北)">
        <span class="header_search" slot="left">
          <i class="iconfont icon-sousuo"></i>
        </span>
        <span class="header_login" slot="right">
          <span class="header_login_text">登录|注册</span>
        </span>
      </HeaderTop>