header

<style lang="stylus" scoped>  @import "../css/base/variables.styl"  @import "../css/mixins/index.styl"  .header-wrap    box-shadow 0 0 1px rgba(0, 0, 0, 0.25)    background #F1F1F1    z-index 5    height 50px    line-height 50px  .header    display flex    height 50px    line-height 50px    z-index 1    align-items center    box-sizing border-box    width calc(100% - 48px)    a      max-width 120px      text-ellipsis()      white-space nowrap      &:last-child:not(.home-link)      &.person      &.home-link        flex-shrink 0    .icon      flex-shrink 0  .default-color      color #cd0010</style><template>  <div class="header-wrap">    <div v-show="visible" class="header pl1">      <router-link class="px05 home-link default-color" :to="{path: '/', query: null}">所有</router-link>      <template v-if="personName">        <icon name="angle-right" class="text-light icon" />        <a class="px05 person default-color" @click="personClick(personName)" >{{personName}}</a>      </template>      <template v-if="storeName">        <icon name="angle-right" class="text-light icon" />        <a class="store px05 default-color" @click="storeClick(personName, storeName)">{{storeName}}</a>      </template>      <template v-if="categoryName">        <icon name="angle-right" class="text-light icon" />        <a class="px05 ">{{categoryName}}</a>      </template>    </div>    <slot name="selected-counter"></slot>    <slot name="button"></slot>  </div></template><script type="text/babel">  import linkMixin from './mixins/link'  import paramsMixin from './mixins/params'  export default{    mixins: [linkMixin, paramsMixin],    props: {      visible: {        type: Boolean,        default: true      }    }  }</script>