Vue Vant H5 二次封装NavBar

说明： 二次封装后，方便统一管理顶部导航栏的样式或操作。如果某一单页导航栏操作过于复杂，建议直接用vant的<van-nav-bar></van-nav-bar>，局部调整。

<template>
  <div class="yourClass">
    <nav-bar title="标题" 
      :leftArrow="true" :leftText='返回' 
      :rightText='按钮' :rigthIcon='{ icon: '', size: 16, place: 'left/right' }' 
      :fixed='true/false' />
  </div>
</template>
<script>
import NavBar from '@/views/components/NavBar'
export default {
  name: 'PortIndex',
  components: { NavBar },
  data() {
    return {

    }
  },
  mounted() {
   
  },
  methods: {

  }
}
</script>
<style scoped lang="scss">

</style>

<template>
  <van-nav-bar
    :title="title"
    :left-text="leftText"
    :right-text="rightText"
    :left-arrow="leftArrow"
    :fixed="fixed"
    @click-left="clickLeft"
    @click-right="clickRight">
    <!--  插槽，自定义右侧按钮  -->
    <template v-if="rightText" #right>
      <van-icon v-if="rightIconRst.place === 'left'" :name="rightIconRst.icon" :size="rightIconRst.size" />
      <span>{{rightText}}</span>
      <van-icon v-if="rightIconRst.place === 'right'" :name="rightIconRst.icon" :size="rightIconRst.size" />
    </template>
  </van-nav-bar>
</template>
<script>
export default {
  name: 'NavBar',
  props: {
    title: {
      type: String,
      default: '标题'
    },
    fixed: {
      type: Boolean,
      default: true
    },
    leftArrow: {
      type: Boolean,
      default: true
    },
    leftText: {
      type: String,
      default: ''
    },
    rightText: {
      type: String,
      default: ''
    },
    rightIcon: {
      type: Object,
      default: null
    },
  },
  data() {
    return {
      rightIconRst: { icon: 'search', size: 18, place: 'left' }, // 图标name，大小，位置
    }
  },
  watch: {
    'rightIcon': {
      handler(nv, ov) {
        this.rightIconRst = Object.assign(this.rightIconRst, nv);
      },
      deep: true,
      immediate: true
    }
  },
  mounted() { },
  methods: {
    clickLeft() {
      this.$router.back();
    },
    // 自定义操作
    clickRight() {
      this.$emit('rightEvent');
    }
  }
}
</script>
<style scoped lang="scss">
// 自己的全局样式库，按需引入
@import '../../styles/custom.scss';

::v-deep {
  .van-nav-bar, .van-nav-bar__content {
    height: $nav_bar_hei; // 锁死导航栏高度，方便计算剩余高度
  }
  .van-icon {
    color: #000000;
    font-size: 24px;
  }
}
</style>