一、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 {
name: 'HeaderTop',
props: {
title: String
}
}
</script>
二、Msite.vue
<template>
<!--首页头部-->
<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>
</template>
<script>
import HeaderTop from '../../components/HeaderTop/HeaderTop'
export default {
name: 'Msite',
components: {
HeaderTop
}
}
</script>
三、Order.vue
<template>
<div class="order">
<HeaderTop title="订单列表"/>
</div>
</template>
<script>
import HeaderTop from '../../components/HeaderTop/HeaderTop'
export default {
name: 'Order',
components: {
HeaderTop
}
}
</script>