MTP20_WEB_GLOBAL/src/packages/qxst/components/base/tabbar/index.vue

<template>
  <div class="app-tabbar">
    <div class="app-tabbar__wrapper" :style="styles">
      <template v-for="(item, index) in dataList" :key="index">
        <div :class="['app-tabbar__item', 'app-tabbar__item--' + item.name, dataIndex === index && 'is-active']"
          @click="onClick(index)">
          <slot :item="item" :index="index">
            <!--判断是否图片图标-->
            <template v-if="item.iconType === 'image'">
              <div :class="['g-icon', dataIndex === index && 'active']">
                <img :src="item.activeIcon" v-if="dataIndex === index" />
                <img :src="item.icon" v-else />
                <span>{{ item.label }}</span>
              </div>
            </template>
            <template v-else>
              <app-iconfont label-direction="bottom" :icon="item.icon" :active-icon="item.activeIcon"
                :active="dataIndex === index">{{ item.label }}</app-iconfont>
            </template>
          </slot>
        </div>
      </template>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { PropType, computed } from 'vue'
import { Tabbar } from './types'
import { useGlobalStore } from '@/stores'
import AppIconfont from '../../base/iconfont/index.vue'

const emit = defineEmits(['click'])

const props = defineProps({
  // 数据列表
  dataList: {
    type: Array as PropType<Tabbar[]>,
    default: () => ([]),
  },
  // 当前标签索引
  dataIndex: {
    type: Number,
    default: 0,
  },
  // 是否固定在底部
  fixed: {
    type: Boolean,
    default: false,
  }
})

const globalStore = useGlobalStore()

const styles = computed(() => ({
  position: props.fixed ? 'fixed' : 'static',
  width: globalStore.clientWidth + 'px',
}))

const onClick = (index: number) => {
  if (props.dataIndex !== index) {
    emit('click', index)
  }
}
</script>

<style lang="less" scoped>
@import './index.less';
</style>