epmet-work-uni/miniprogram_npm/@vant/weapp/steps/index.vue

<template>
    <view :class="'custom-class ' + utils.bem('steps', [direction])">
        <view class="van-step__wrapper">
            <view
                @tap="onClick"
                :data-index="index"
                :class="utils.bem('step', [direction, status(index, active)]) + ' van-hairline'"
                :style="status(index, active) === 'inactive' ? 'color: ' + inactiveColor : ''"
                v-for="(item, index) in steps"
                :key="index"
            >
                <view class="van-step__title" :style="index === active ? 'color: ' + activeColor : ''">
                    <view>{{ item.text }}</view>
                    <view class="desc-class">{{ item.desc }}</view>
                </view>

                <view class="van-step__circle-container">
                    <block v-if="index !== active">
                        <van-icon
                            v-if="item.inactiveIcon || inactiveIcon"
                            :color="status(index, active) === 'inactive' ? inactiveColor : activeColor"
                            :name="item.inactiveIcon || inactiveIcon"
                            class="van-step__icon"
                        />
                        <view wx:else class="van-step__circle" :style="'background-color: ' + (index < active ? activeColor : inactiveColor)" />
                    </block>

                    <van-icon v-else :name="item.activeIcon || activeIcon" :color="activeColor" class="van-step__icon" />
                </view>

                <view v-if="index !== steps.length - 1" class="van-step__line" :style="'background-color: ' + (index < active ? activeColor : inactiveColor)" />
            </view>
        </view>
    </view>
</template>
<script module="utils" lang="wxs" src="@/miniprogram_npm/@vant/weapp/wxs/utils.wxs"></script>
<script module="status" lang="wxs">
function get(index, active) {
  if (index < active) {
    return 'finish';
  } else if (index === active) {
    return 'process';
  }

  return 'inactive';
}

module.exports = get;
</script>
<script>
import { VantComponent } from '../common/component';
import { GREEN, GRAY_DARK } from '../common/color';
export default {
    data() {
        return {};
    },
    classes: ['desc-class'],
    props: {
        icon: String,
        steps: Array,
        active: Number,
        direction: {
            type: String,
            default: 'horizontal'
        },
        activeColor: {
            type: String,
            default: GREEN
        },
        inactiveColor: {
            type: String,
            default: GRAY_DARK
        },
        activeIcon: {
            type: String,
            default: 'checked'
        },
        inactiveIcon: String
    },
    methods: {
        onClick(event) {
            const { index } = event.currentTarget.dataset;
            this.$emit('click-step', index);
        }
    }
};
</script>
<style>
@import '../common/index.css';
.van-steps {
    background-color: var(--steps-background-color, #fff);
    overflow: hidden;
}
.van-steps--horizontal {
    padding: 10px;
}
.van-steps--horizontal .van-step__wrapper {
    display: flex;
    overflow: hidden;
    position: relative;
}
.van-steps--vertical {
    padding-left: 10px;
}
.van-steps--vertical .van-step__wrapper {
    padding: 0 0 0 20px;
}
.van-step {
    color: var(--step-text-color, #969799);
    flex: 1;
    font-size: var(--step-font-size, 14px);
    position: relative;
}
.van-step--finish {
    color: var(--step-finish-text-color, #323233);
}
.van-step__circle {
    background-color: var(--step-circle-color, #969799);
    border-radius: 50%;
    height: var(--step-circle-size, 5px);
    width: var(--step-circle-size, 5px);
}
.van-step--horizontal {
    padding-bottom: 14px;
}
.van-step--horizontal:first-child .van-step__title {
    transform: none;
}
.van-step--horizontal:first-child .van-step__circle-container {
    padding: 0 8px 0 0;
    transform: translate3d(0, 50%, 0);
}
.van-step--horizontal:last-child {
    position: absolute;
    right: 0;
    width: auto;
}
.van-step--horizontal:last-child .van-step__title {
    text-align: right;
    transform: none;
}
.van-step--horizontal:last-child .van-step__circle-container {
    padding: 0 0 0 8px;
    right: 0;
    transform: translate3d(0, 50%, 0);
}
.van-step--horizontal .van-step__circle-container {
    background-color: #fff;
    bottom: 6px;
    padding: 0 var(--padding-xs, 8px);
    position: absolute;
    transform: translate3d(-50%, 50%, 0);
    z-index: 1;
}
.van-step--horizontal .van-step__title {
    display: inline-block;
    font-size: var(--step-horizontal-title-font-size, 12px);
    transform: translate3d(-50%, 0, 0);
}
.van-step--horizontal .van-step__line {
    background-color: var(--step-line-color, #ebedf0);
    bottom: 6px;
    height: 1px;
    left: 0;
    position: absolute;
    right: 0;
    transform: translate3d(0, 50%, 0);
}
.van-step--horizontal.van-step--process {
    color: var(--step-process-text-color, #323233);
}
.van-step--horizontal.van-step--process .van-step__icon {
    display: block;
    font-size: var(--step-icon-size, 12px);
    line-height: 1;
}
.van-step--vertical {
    line-height: 18px;
    padding: 10px 10px 10px 0;
}
.van-step--vertical:after {
    border-bottom-width: 1px;
}
.van-step--vertical:last-child:after {
    border-bottom-width: none;
}
.van-step--vertical:first-child:before {
    background-color: #fff;
    content: '';
    height: 20px;
    left: -15px;
    position: absolute;
    top: 0;
    width: 1px;
    z-index: 1;
}
.van-step--vertical .van-step__circle,
.van-step--vertical .van-step__icon,
.van-step--vertical .van-step__line {
    left: -14px;
    position: absolute;
    top: 19px;
    transform: translate3d(-50%, -50%, 0);
    z-index: 2;
}
.van-step--vertical .van-step__icon {
    background-color: var(--steps-background-color, #fff);
    font-size: var(--step-icon-size, 12px);
    line-height: 1;
}
.van-step--vertical .van-step__line {
    background-color: var(--step-line-color, #ebedf0);
    height: 100%;
    transform: translate3d(-50%, 0, 0);
    width: 1px;
    z-index: 1;
}
</style>