vue 外賣app(3) 利用slot分發內容

標籤：log   通過   har   template   nts   左右   styles   ips   ops   

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>

　　

vue 外賣app(3) 利用slot分發內容