步骤条和按钮联动（上一步下一步）

 

ImportMatchDrawer.vue

<template>
  <div class="import-drawer">
    <Drawer :title="props.titleName" ref="drawer" size="648">
      <!-- 内容 -->
      <template #content>
        <!-- 步骤条 -->
        <CustomStep :step-data="stepData" :current-step="currentStep" />

        <div class="create-single-product-promotion-form">
          <!-- 第一步 -->
          <StepOne :currentStep="currentStep" />

          <!-- 第二步 -->
          <StepTwo :currentStep="currentStep" />
        </div>
      </template>
      <!-- 按钮 -->
      <template #foot_button>
        <el-button>取消</el-button>
        <el-button v-if="currentStep !== 1" @click="stepChange('prev')">上一步</el-button>
        <el-button type="primary" @click="stepChange('next')">{{
          currentStep !== 2 ? "下一步" : "保存"
        }}</el-button>
      </template>
    </Drawer>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue"
import Drawer from "@/components/common/Drawer.vue"
import StepOne from "./stepOne.vue"
import StepTwo from "./stepTwo.vue"
import CustomStep from "./customStep.vue"

const props = defineProps({
  type: {
    type: Number,
    default: 0
  },
  titleName: {
    type: String,
    default: ""
  },
  warn: {
    type: String,
    default: ""
  }
})
const currentStep = ref<any>(1) // 当前步骤
const stepData = ref<any[]>([
  // 步骤数据
  { id: 1, title: "上传文件" },
  { id: 2, title: "匹配字段" }
])

// 弹框DOM
const drawer = ref<InstanceType<typeof Drawer> | null>(null)

// 打开
const open = () => {
  drawer.value?.isOpen()
}

// 步切换
const stepChange = (type: any) => {
  if (type == "prev") {
    currentStep.value = Math.max(1, currentStep.value - 1)
  } else {
    if (currentStep.value === 2) {
      return
    }
    currentStep.value = Math.min(2, currentStep.value + 1)
  }
}

defineExpose({
  open
})
</script>

<style lang="scss" scoped></style>

 CustomStep.vue

<template>
  <div class="custom-step">
    <el-steps :active="currentStep" simple>
      <template v-for="step in stepData" :key="step.id">
        <el-step
          :title="step.title"
          :description="step.description"
          :class="{ 'is-finish': step.id < currentStep }"
        >
          <template #icon>
            {{ step.id }}
          </template>
        </el-step>
      </template>
    </el-steps>
  </div>
</template>

<script setup lang="ts">
import { defineProps, withDefaults } from "vue"

defineProps({
  currentStep: {
    type: Number,
    default: 0
  },
  stepData: {
    type: Array<any>,
    default: () => []
  }
})
</script>

<style scoped lang="scss">
.custom-step {
  width: 60%;
  height: 62px;
  margin: 0 auto;
  :deep(.el-steps) {
    padding: 20px 40px;
    background-color: transparent;
    .el-step__head {
      &.is-finish {
        .el-step__icon {
          border: none;
          color: var(--el-color-white);
          background-color: var(--el-color-primary);
        }
      }
      .el-step__icon {
        width: 22px;
        height: 22px;
        font-weight: 600;
        font-size: 16px;
        border-radius: 50%;
        border: 1px solid #c2c4c6;
      }
    }
    .el-step__main {
      display: flex;
      align-items: center;
      .el-step__arrow {
        flex: 1;
        height: 2px;
        margin: 0 10px;
        background-color: #c2c4c6;
        &::before,
        &::after {
          display: none;
        }
      }
    }
    .is-finish {
      .el-step__arrow {
        background-color: var(--el-color-primary);
      }
    }
  }
}
</style>

StepOne.vue

<!-- eslint-disable vue/no-mutating-props -->
<template>
  <div class="step-one-form" v-show="currentStep === 1"> 1 </div>
</template>

<script setup lang="ts">
const props = defineProps({
  currentStep: {
    type: Number,
    default: 1
  }
})
</script>

<style scoped lang="scss"></style>

StepTwo.vue

<!-- eslint-disable vue/no-mutating-props -->
<template>
  <div class="step-one-form" v-show="currentStep === 2"> 2 </div>
</template>

<script setup lang="ts">
const props = defineProps({
  currentStep: {
    type: Number,
    default: 1
  }
})
</script>

<style scoped lang="scss"></style>