busroute/src/components/selectDate.vue

<template>
  <div class="selectDate">
    <div
      v-for="(itm) in btns"
      :key="itm.val"
      :class="{ active: itm.val === checkId, disabled: itm.disabled }"
      @click="changeFn(itm.val)"
    >
      {{ itm.label }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const emit = defineEmits<{(evt: 'dateChange', type: number): void
}>()
const checkId = ref(1)
const btns = [
  { val: 4, label: '总', disabled: true },
  { val: 3, label: '年', disabled: false },
  { val: 2, label: '月', disabled: false },
  { val: 1, label: '日', disabled: false }
]
function changeFn(id: number) {
  checkId.value = id
  emit('dateChange', checkId.value)
}
</script>

<style lang="scss" scoped>
.selectDate {
  position: absolute;
  height: 30px;
  border-radius: 30px;
  border: solid 1px #2185E8;
  left: 50%;
  transform: translate(-50%, 0);
  top: 10px;
  z-index: 2;
  display: flex;
  cursor: not-allowed;

  &>div {
    width: 90px;
    color: white;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
    line-height: 30px;

    &:not(:first-child) {
      border-left: solid 1px #2185E8;
    }

    &.disabled {
      cursor: not-allowed;
      pointer-events: none;
      // background: #ccc;
    }

    &:first-child {
      border-radius: 30px 0 0 30px;
    }

    &:last-child {
      border-radius: 0 30px 30px 0;
    }
  }

  .active {
    background: #2185e860;
  }
}
</style>