<template>
|
<!-- <el-button type="primary" @click="changeActive">change</el-button> -->
|
<!-- <el-row>
|
<el-col
|
:span="active == 1 ? 16 : 4"
|
:class="active == 1 ? 'prod-active' : 'prod-inactive'"
|
>step1</el-col>
|
<el-col
|
:span="active == 2 ? 16 : 4"
|
:class="active == 2 ? 'prod-active' : 'prod-inactive'"
|
>step2</el-col>
|
<el-col
|
:span="active == 3 ? 16 : 4"
|
:class="active == 3 ? 'prod-active' : 'prod-inactive'"
|
>step3</el-col>
|
</el-row> -->
|
<el-row>
|
<div :class="active == 1 ? 'prod-active' : 'prod-inactive'">
|
<slot name="step1"></slot>
|
</div>
|
<div :class="active == 2 ? 'prod-active' : 'prod-inactive'">
|
<slot name="step2"></slot>
|
</div>
|
<div :class="active == 3 ? 'prod-active' : 'prod-inactive'">
|
<slot name="step3"></slot>
|
</div>
|
</el-row>
|
</template>
|
<script setup>
|
import { ref } from 'vue';
|
|
const props = defineProps({
|
active: {
|
type: Number,
|
default: 1
|
}
|
});
|
|
// function changeActive() {
|
// active.value++;
|
// active.value = active.value > 3 ? 1 : active.value;
|
// }
|
</script>
|
<style scoped>
|
.prod-active {
|
width: 66.667%;
|
transition: width 0.5s ease;
|
background-color: #409eff;
|
color: white;
|
margin: 5px 0;
|
border-radius: 4px;
|
}
|
|
.prod-inactive {
|
width: 16.667%;
|
transition: width 0.5s ease;
|
background-color: #e4e7ed;
|
color: #606266;
|
margin: 5px 0;
|
border-radius: 4px;
|
}
|
</style>
|
