gasInjection-project/src/views/vent/comment/components/bottomMenu.vue

<template>
  <div class="bottom-btn-group">
    <div
      v-for="item in navList"
      :key="item.pathName"
      class="vent-row-center btn-item"
      :class="{ 'btn-item-active': isBtnActive === item.pathName || item.isHover }"
      @click="setBtn('click', item)"
    >
      {{ item.title }}
    </div>
  </div>
</template>
<script lang="ts">
  import { ref, defineComponent } from 'vue';
  type navListType = { title: string; pathName: string; isHover: Boolean };

  export default defineComponent({
    name: 'BottomMenu',
    props: {
      navList: {
        type: Array<navListType>,
        default: () => [
          {
            title: '监控界面',
            pathName: 'monitor',
            isHover: false,
          },
          {
            title: '历史监测记录',
            pathName: 'monitor_history',
            isHover: false,
          },
          {
            title: '操作历史记录',
            pathName: 'handler_history',
            isHover: false,
          },
          {
            title: '故障诊断历史记录',
            pathName: 'faultRecord',
            isHover: false,
          },
        ],
      },
    },
    emits: ['change'],
    setup(props, { emit }) {
      const isBtnActive = ref(props.navList[0].pathName);

      function setBtn(type, activeObj) {
        if (type === 'click') {
          isBtnActive.value = activeObj.pathName;
          activeObj.isHover = true;
        }
        props.navList.forEach((item) => {
          if (item.title !== activeObj.title) {
            activeObj.isHover = false;
          }
        });
        emit('change', isBtnActive.value);
      }
      return {
        setBtn,
        isBtnActive,
      };
    },
  });
</script>
<style lang="less" scoped>
  .bottom-btn-group {
    display: flex;
    position: fixed;
    width: 100%;
    height: 100px;
    bottom: 10px;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    z-index: 999;

    .btn-item {
      width: 182px;
      height: 53px;
      margin: 10px;
      color: #fff;
      cursor: pointer;
      padding-bottom: 2px;
      pointer-events: auto;
      background: url('/@/assets/images/vent/bottom-btn.png');
      font-family: 'ysbtFont';
      font-size: 18px;
    }
    .btn-item-active {
      background: url('/@/assets/images/vent/bottom-btn-active.png') !important;
      color: #ffffff !important;
    }
  }
</style>