Vue + Vant 實現頁面頂端 TopBar

我們在做移動端開發時，有的頁面頂部需要設置標題、返回上一頁面箭頭、關閉按鈕等。不同的頁面的標題不同，有的頁面需要返回按鈕、有的頁面需要關閉按鈕。我們可以根據需求，將其封裝成 TopBar 組件，標題運用 Vue 組件的 props 實現動態賦值，供其他組件引用。

 

效果圖：

 

TopBar.vue:

1.<template></template>

<template>
  <div class="top-bar" :class="[ (!hasBack && !hasClose) ? 'center' : 'between' ]">
    <van-icon v-if="hasBack" class="back-icon" name="arrow-left" @click="goBack" />
    <van-icon v-if="hasClose" class="back-icon" name="arrow-left" />
    <span>{{title}}</span>
    <div></div>
  </div>
</template>

注意：倒數第三行的 <div></div> 非常重要！ 這為下一步，為 .tob-bar 的 {{ title }} 設置 flex 布局的 justify-conent：center 實現居中顯示。如果不加，若有左側返回箭頭時，將 title 居中實現起來很麻煩。

 

2.<script></script>

props: {
  title: { type: String, default: '' },
  hasBack: { type: Boolean, default: false },
  hasClose: { type: Boolean, default: false },
},

其中 title 接受不同頁面的標題。

 

3.<style></style>

<style lang="scss" scoped>
  .top-bar {
    display: flex;
    align-items: center;
    height: 11.5vw;
    padding: 0 3vw;
    background: #fff;
    border-bottom: 1px solid #eee;
    font-size: 4.5vw;
    box-sizing: border-box;
  }
  .center {
    justify-content: center;
  }
  .between {
    justify-content: space-between;
  }
</style>

 

4. 父組件引用：

組件局部注冊：

<script>
  import TopBar from '@/components/TopBar';
  
  export default {
    components: {
      TopBar,
    },
  }
</script>

 

引用：

<template>
  <div class="city-container">
    <top-bar title="城市列表" hasBack></top-bar>
  </div>
</template>

title 向 props 中傳入靜態值， hasBack 無值，則默認為 true.

 

就到這里啦。很簡單吧 🙂，一起加油哦！