crm-mobile/components/wk-tabbar/wk-tabbar.vue

<template>
  <view class="wk-tabbar">
    <button
      v-for="(item, index) in list"
      :key="index"
      :class="selected === index ? (activeClass || 'is-selected') : ''"
      class="wk-tab-item"
      @click="_handleSelect(index)">
      <template v-if="selected !== index">
        <template v-if="item.icon">
          <text
            v-if="item.icon.startsWith('ft ')"
            :class="item.icon"
            class="font-icon" />
          <text
            v-else
            :class="item.icon"
            class="wk font-icon" />
        </template>

        <image v-else :src="$static(item.src)" class="nav-icon" />
      </template>

      <template v-else>
        <template v-if="item.active_icon">
          <text
            v-if="item.icon.startsWith('ft ')"
            :class="item.active_icon"
            class="font-icon" />
          <text
            v-else
            :class="item.active_icon"
            class="wk font-icon" />
        </template>
        <image v-else :src="$static(item.active_src || item.src)" class="nav-icon" />
      </template>

      <view v-if="item.badge" class="badge">
        <!-- {{ item.badge }} -->
      </view>
      <view class="nav-desc">
        {{ item.name }}
      </view>
    </button>
  </view>
</template>

<script>
	/**
	 * 底部导航栏点击切换
	 * props:
	 *    list {Array} 导航数组 [{Object}]
	 *                         name: {String} 导航描述信息
	 *                         src: {String} 导航图标，其中 icon 不为空时该项不生效
	 *                         active_src: {String} 选中后的图标，其中 active_icon 不为空时该项不生效
	 *                         icon {String} 导航字体图标
	 *                         active_icon {String} 选中后的导航字体图标
	 *                         path: {String} 点击该项时要跳转的路由地址 path 和 fn 互斥
	 *                         query: {Object} 路由跳转时查询参数
	 *                         fn: {Function} 点击该项时要执行的函数
	 *                         params: {Object} 点击该项要执行的函数的参数
	 *    active-class {String} 选中后的class名
	 *    default-value {Number} 默认选中第几个
	 */
  export default {
    name: 'WkTabbar',
    props: {
      value: {
        type: Number,
        default: 0
      },
      list: {
        type: Array,
        required: true
      },
      activeClass: {
        type: String,
        default: null
      },
    },
    data() {
      return {
        selected: null, // 当前选中第几个
        maskStatus: false
      }
    },
    watch: {
      value: {
        handler(val) {
          console.log('tab selected', val)
          this.selected = val
        },
        deep: true,
        immediate: true
      }
    },
    mounted() {
      uni.$on('mask-evt', status => {
        this.maskStatus = status
      })
      console.log('tab: ', this)
    },
    beforeDestroy() {
      uni.$off('mask-evt')
    },
    methods: {
      /**
       * 导航切换选择
       * @private
       */
      _handleSelect(index) {
        console.log('tabbar click')
        if (this.maskStatus) {
          this.$nextTick(function() {
            uni.$emit('mask-evt', false)
          })
          return
        }
        if (index === this.selected) return
        this.selected = index
        this.$emit('input', index)

        const item = this.list[index]
        if (item.fn && typeof item.fn === 'function') {
          item.fn(item.params || null)
        } else if (item.path) {
          this.$Router.reLaunch({
            url: item.path,
            query: item.query ? item.query : null
          })
        }
      },

      addMask() {
      },
      removeMask() {}
    }
  }
</script>

<style scoped lang="scss">
.wk-tabbar {
  position: relative;
  z-index: 10;
  width: 100%;
  height: $tabbar-height;
  background-color: white;
  border-top: 1rpx solid #F1F1F1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .wk-tab-item {
    flex: 1;
    position: relative;
    height: 100%;
    padding: 0;
    flex-direction: column;
    border-width: 0;
    @include center;
    .font-icon {
      font-size: 38rpx;
      color: #4E565E;
      display: block;
    }
    .nav-icon {
      width: 38rpx;
      height: 38rpx;
    }
    .nav-desc {
      font-size: 24rpx;
      color: #4E565E;
    }
    .badge {
      position: absolute;
      top: 10rpx;
      left: calc(50% + 15rpx);
      width: 18rpx;
      height: 18rpx;
      border-radius: 50%;
      background-color: $error;
      // min-width: 32rpx;
      // height: 32rpx;
      // font-size: 22rpx;
      // color: white;
      // padding: 0 10rpx;
      // background-color: $error;
      // border-radius: 32rpx;
      // @include center;
    }

    &.is-selected {
      background-color: white;
      .font-icon, .nav-desc {
        color: $theme-color;
      }
    }
  }
}
</style>