usky-web-pad/src/components/oa-steps/index.vue

<!--
 * @Description: 
 * @Author: vivi
 * @Date: 2023-05-06 14:58:54
 * @LastEditTime: 2023-05-19 11:52:27
-->
<template>
  <view class="step-status">
    <view class="step-status-item" v-for="(li, index) in list" :key="index">
      <view
        class="step-status-item-lable"
        :style="{
          color: step >= index + 1 ? activeColor : '',
        }"
        @click="handleItem(li)"
      >
        {{ li }}
      </view>

      <uni-icons
        type="forward"
        class="step-status-item-icons"
        size="15"
        :style="{
          color: step > index + 1 ? activeColor : '',
          left: `calc((100% / ${list.length}) * ${index + 1})`,
        }"
        v-if="index != list.length - 1"
      ></uni-icons>
    </view>
  </view>
</template>

<script>
export default {
  name: "Step-status",
  props: {
    list: {
      type: Object,
      default: [],
    },
    step: {
      type: Number,
      default: 1,
    },
    activeColor: {
      type: String,
      default: "#409EFF",
    },
  },
  data() {
    // 这里存放数据
    return {};
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  methods: {
    handleItem(event) {
      this.$emit("stepsClick", event);
    },
  },
};
</script>

<style scoped lang="scss">
.step-status {
  position: relative;
  width: 100%;
  height: 40px;
  opacity: 1;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.06);

  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 10upx;

  &-item {
    display: flex;
    // width: 100%;

    &-lable {
    }

    &-icons {
      position: absolute;
      top: 13px;
    }
  }
}
</style>