vent-forewarn-micro/src/views/vent/common/basicWorkBtn.vue

<template>
  <div class="basicWorkBtn">
    <div :class="activeIndex == index ? 'btn-box1' : 'btn-box'" v-for="(item, index) in workBtnLists" :key="index"
      @click="WorkBtnClick(index, item)">
      <div class="work-btn-text">{{ item.name }}</div>
    </div>

  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, defineProps, watch } from 'vue'

let props = defineProps({
  workBtnList: {
    type: Array,
    default: () => {
      return []
    }
  }
})

let workBtnLists = ref<any[]>([])


let activeIndex = ref(0) //当前按钮激活索引

//选项切换
function WorkBtnClick(index, item) {
  console.log(index, 'index-----')
  activeIndex.value = index
}

watch(() => props.workBtnList, (newV, oldV) => {
  console.log(newV, '按钮新数据--------')
  workBtnLists.value = newV
}, { immediate: true, deep: true })

</script>

<style lang="less" scoped>
@font-face {
  font-family: 'douyuFont';
  src: url('../../../assets/font/douyuFont.otf');
}

.basicWorkBtn {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;

  .btn-box {
    width: 203px;
    height: 74px;
    margin: 0px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url('../../../assets/images/workPlaceWarn/work-btn.png') no-repeat center;
    background-size: 100% 100%;
    cursor: pointer;

    &:first-child {
      margin-left: 0px;
    }

    &:last-child {
      margin-right: 0px;
    }

    .work-btn-text {
      font-family: 'douyuFont';
      font-size: 18px;
      color: #fff;
    }
  }

  .btn-box1 {
    position: relative;
    width: 203px;
    height: 92px;
    margin: 0px 10px;


    background: url('../../../assets/images/workPlaceWarn/work-btn-choice.png') no-repeat center;
    background-size: 100% 100%;
    cursor: pointer;

    &:first-child {
      margin-left: 0px;
    }

    &:last-child {
      margin-right: 0px;
    }

    .work-btn-text {
      position: absolute;
      left: 50%;
      top: 26px;
      transform: translate(-50%, 0);
      font-family: 'douyuFont';
      font-size: 18px;
      color: #fff;
    }
  }
}
</style>