自定义封装进度条标签

代码如下

<!-- 封装自定义progress标签 -->
<template>
  <div class="progress">
    <div class="item" :class="{active: item.complete == 1}"
    v-for="(item, index) in list" :key="index"
    @click="handlerStage(item)"
    >
    {{ item.stageName }}
  </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
const emit = defineEmits(['handlerStage'])
const props = defineProps({
  list: {
    type: Array,
    default: [] // 设置默认值为 false
  },
})
const handlerStage = (item) => {
  emit('handlerStage', item)
}
</script>
<style lang="scss" scoped>
.progress {
  display: flex;
  div {
    min-width: 95px;
    max-height: 30px;
    box-sizing: border-box;
    padding: 6px 18px;
    background: #fff;
    display: inline-block;
    color: #2D78FF /*#50abe4*/;
    position: relative;
    margin-right: 6px;
    border: 1px solid #2D78FF;
    border-bottom-right-radius: 2px;
  }
  div:after {
    content: '';
    display: block;
    width: 21px;
    height: 22px;
    box-sizing: border-box;
    transform: rotate(45deg);
    border: 1px solid #2D78FF;
    position: absolute;
    right: -11px;
    top: 3px;
    z-index: 10;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-top-left-radius: 1px;
    border-bottom-right-radius: 3px;
    border-top-right-radius: 4px;
  }
  div:before {
    content: '';
    display: block;
    width: 21px;
    height: 21px;
    box-sizing: border-box;
    transform: rotate(135deg);
    border: 1px solid #2D78FF;
    position: absolute;
    left: -11px;
    top: 3px;
    border-bottom-color: transparent;
    border-right-color: transparent;
    border-bottom-left-radius: 1px;
    border-top-left-radius: 2px;
    border-top-right-radius: 1px;
  }
  .item {
    padding-left: 35px;
    border-right-color: transparent;
    border-left-color: transparent;
  }
  div:first-child {
    border-left-color: #2D78FF;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
  }

  div:last-child {
    border-right-color: #2D78FF;
    border-bottom-right-radius: 2px;
    border-top-right-radius: 2px;
  }

  div:first-child:before {
    display: none;
  }
  div:last-child:after{
    display: none;
  }
  div:hover {
    cursor: pointer;
    background-color: #2D78FF;
    color: #fff;
  }
  div:hover::after {
    background-color: #2D78FF;
  }
  div:hover::before {
    background-color: #fff;
  }
  div:first-child:hover::before {
    background-color: #fff;
  }
  .active:first-child {
    background-color: #2D78FF;
    color: #fff;
    &::after {
      background-color: #2D78FF;
    }
  }
  .active {
    background-color: #2D78FF;
    color: #fff;
    &::before {
      background-color: #fff;
    }
    &::after {
      background-color: #2D78FF;
    }
  }
  .active:last-child {
    background-color: #2D78FF;
    color: #fff;
    &::before {
      background-color: #fff;
    }
  }
}
</style>

在页面中引用

<hpProgress :list="cusStageVoList" @handlerStage="handlerStage"></hpProgress>
// 以下代码是参考思路（不重要）
// 客户阶段数组
const cusStageVoList = ref<any>([])
// 修改客户阶段
const handlerStage = async (val: any) => {
  let query = {
    id: props.detailCusIdRef,
    stageId: val.id
  }
  await updateCusStageApi(query).then((res: any) => {
    if (res.code === 1) {
      ElMessage({
        type: "success",
        message: `修改成功`,
        duration: 1500,
      })
      emit("customerDetailInfo", props.detailCusIdRef)
    } else {
      ElMessage({
        type: "warning",
        message: `修改失败，${res.msg}`,
        duration: 1500,
      })
    }
  }).catch((err: any) => {
    console.log(err);
  })
}

效果展示