tab栏 弧度选项卡vue

在模板中

          <!-- tab列表 -->
          <div class="tab">
            <div
              v-for="(item, index) in tabList"
              :key="item"
              class="tab_item"
              :class="active == index ? 'active' : 'noactive'"
              @click="active = index"
            >
              {{ item }}
            </div>
          </div>

在js中

// 头部标签卡选项
// tab列表
const tabList = ref(['病床分机', '门口分机', '医护副机', '移动分机', '未接来电'])
// 选中项
const active = ref(0)

import useSwipeHook from '@/hooks/useSlide'
useSwipeHook((e: any) => {
  if (e === 'left' && active.value < 4) {
    active.value++
  } else if (e === 'right' && active.value > 0) {
    active.value--
  }
  // e === 'left' && console.log('左滑')
  // e === 'right' && console.log('右滑')
})








import { ref, onMounted, onUnmounted } from 'vue'

export default function (callback: any) {
  const startX = ref(0)
  const startY = ref(0)
  const threshold = 50

  const handleTouchStart = (event: any) => {
    startX.value = event.touches[0].clientX
    startY.value = event.touches[0].clientY
  }

  const handleTouchEnd = (event: any) => {
    const deltaX = event.changedTouches[0].clientX - startX.value
    const deltaY = event.changedTouches[0].clientY - startY.value

    if (Math.abs(deltaX) > Math.abs(deltaY)) {
      if (deltaX > threshold) {
        callback && callback('right')
      } else if (deltaX < -threshold) {
        callback && callback('left')
      }
    }
  }

  onMounted(() => {
    window.addEventListener('touchstart', handleTouchStart)
    window.addEventListener('touchend', handleTouchEnd)
  })

  onUnmounted(() => {
    window.removeEventListener('touchstart', handleTouchStart)
    window.removeEventListener('touchend', handleTouchEnd)
  })
}

在css中

 .tab {
      border-radius: 20px 20px 0 0;
      overflow: hidden;
      display: flex;
      height: 62px;
      align-items: center;
      justify-content: space-between;
      background-color: #009688;
      align-items: center;

      .tab_item {
        text-align: center;
        flex: 1;
        height: 62px;
        line-height: 62px;
      }

      .active {
        font-size: 30px;
        background-color: #f1f5f9;
        color: #009688;
        border-radius: 20px 20px 0 0;
        position: relative;
        /* 设置变形原点 */
        transform-origin: center bottom;
      }

      .active::before,
      .active::after {
        content: '';
        position: absolute;
        width: 20px;
        height: 20px;
        bottom: 0;
      }
      .active::before {
        left: -19px;
        /* 设置径向渐变 */
        background: radial-gradient(
          circle at 0 0,
          transparent 20px,
          #f1f5f9 20px
        );
      }
      .active::after {
        right: -19px;
        /* 设置径向渐变 */
        background: radial-gradient(
          circle at 20px 0,
          transparent 20px,
          #f1f5f9 20px
        );
      }

      .noactive {
        color: #ffffff;
        font-size: 24px;
      }
    }