ImportMatchDrawer.vue

javascript"><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

javascript"><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

javascript"><!-- 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

javascript"><!-- 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>