Steps.vue

<template>
  <view class="step">
     <view v-for="(item,index) in list" class="step-item" :key="index">
<!--       <view class="u-relative">-->
<!--         <view class="step-line" :class="[current === index ? 'active':'']"></view>-->
<!--         -->
<!--       </view>-->
       <view class="step-line" v-if="index !== list.length - 1"
             :class="[current >= index ? 'active':'']" :style="[lineStyle]"></view>
       <view class="step-circle u-m-b-24" :class="[current >= index ? 'active':'']"></view>
       <view class="step-item--title" :class="[current === index ? 'active-color':'']">{{item.title}}</view>
       <view class="step-item--desc">{{item.desc}}</view>
     </view>
  </view>
</template>

<script>
// #ifdef APP-NVUE
const dom = uni.requireNativePlugin('dom')
// #endif
export default {
  name: "steps",
  props:{
    current:{
      type: Number,
      default: 0
    },
    list:{
      type: Array,
      default: () => []
    }
  },
  data(){
    return {
      size: {
        height: 0,
        width: 0
      },
    }
  },
  computed:{
    lineStyle() {
      const style = {}
      style.width = this.size.width + 'px'
      style.left = this.size.width / 2 + 'px'
      return style
    },
  },
  mounted() {
    this.getStepsItemRect()
  },
  methods:{
    uGetRect(selector, all) {
      return new Promise((resolve) => {
        uni.createSelectorQuery()
            .in(this)[all ? 'selectAll' : 'select'](selector)
            .boundingClientRect((rect) => {
              if (all && Array.isArray(rect) && rect.length) {
                resolve(rect)
              }
              if (!all && rect) {
                resolve(rect)
              }
            })
            .exec()
      })
    },
    getStepsItemRect() {

      this.uGetRect('.step-item').then(size => {
        this.size = size
      })


      // #ifdef APP-NVUE
      dom.getComponentRect(this.$refs['u-steps-item'], res => {
        const {
          size
        } = res
        this.size = size
      })
      // #endif
    }
  }
}
</script>

<style scoped lang="scss">
.active{
  background: #1677FF !important;
}
.active-color{
  color: #1677FF !important;
}
.step{
  display: flex;
  &-item{
    flex: 1;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    &--title{
      font-size: 24rpx;
      color: #333;
    }

    &--desc{
      font-size: 24rpx;
      color: #999;
    }
  }

  &-line{
    background: #e5e5e5; height: 2rpx;
    position: absolute;
    width: 100%;
    top: 6rpx;

  }

  &-circle{
    margin: 0 auto;
    width: 16rpx; height: 16rpx;
    background: #e5e5e5; border-radius: 50%;
  }


}

</style>