mky-vent-base/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" @click="setBtn('click', item)">
      <dv-decoration11
        :color="isBtnActive === item.pathName ? activeColors : item.isHover ? activeColors : noActiveColors"
        style="width:200px;height:60px;">
        {{ item.title }}
      </dv-decoration11>
    </div>
  </div>
</template>
<script lang="ts">
import { ref, defineComponent } from 'vue'
import { Decoration11 as DvDecoration11} from '@kjgl77/datav-vue3'
type navListType = { title: string; pathName: string; isHover: Boolean };

export default defineComponent({
  name: 'BottomMenu',
  components: { DvDecoration11 },
  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)
    const activeColors = ['#009BFF', '#28DBE4']
    const noActiveColors = ['#aaa', '#aaa']

    function setBtn(type, activeObj) {
      if (type === 'over') {
        activeObj.isHover = true
      } else if (type === 'leave') {
        activeObj.isHover = false
      } else if (type === 'click') {
        isBtnActive.value = activeObj.pathName
      }
      emit('change', isBtnActive.value)
    }
    return {
      activeColors, noActiveColors, setBtn, isBtnActive
    }
  },
})


</script>
<style lang="less" scoped>
.bottom-btn-group {
    display: flex;
    position: fixed;
    width: 100%;
    height: 100px;
    bottom: 20px;
    align-items: center;
    justify-content: center;

    .btn-item {
      width: 200px;
      height: 60px;
      margin: 10px;
      color: #fff;
      cursor: pointer;
      pointer-events: auto;
    }
  }
</style>