我正在学习svelteKit
,并且正在使用props
so 构建一个步骤进度,这是我的组件progressStep.svelte
<script>
export let steps = [];
export let currentStep = 1;
const isActive = (index) => {
console.log(`isActive - index: ${index}, currentStep: ${currentStep}`);
return index + 1 === currentStep;
};
const isCompleted = (index) => {
console.log(`isCompleted - index: ${index}, currentStep: ${currentStep}`);
return index + 1 < currentStep;
};
</script>
<style>
.progress-container {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
margin-bottom: 20px;
}
.progress-container::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 2px;
background: #ddd;
z-index: 0;
}
.progress-step {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
}
.step-circle {
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #ddd;
}
.step-active .step-circle {
background: #007bff;
color: white;
}
.step-completed .step-circle {
background: #28a745;
color: white;
}
.progress-line {
position: absolute;
top: 50%;
left: 50%;
height: 2px;
background: #28a745;
z-index: 0;
}
</style>
<div class="progress-container">
{#each steps as step, index}
<div class="progress-step {isActive(index) ? 'step-active' : ''} {isCompleted(index) ? 'step-completed' : ''}">
<div class="step-circle">{isCompleted(index) ? '✓' : index + 1}</div>
<div>{step}</div>
{#if index < steps.length - 1}
<div class="progress-line" style="width: {isCompleted(index) || isActive(index) ? 'calc(100% - 15px)' : '0'};"></div>
{/if}
</div>
{/each}
</div>
我将此组件导入+page.svelte
<script>
import ProgressStep from '@/components/progressStep/progressStep.svelte';
let currentStep = 1;
function nextStep() {
if (currentStep < 4) currentStep += 1;
}
function prevStep() {
if (currentStep > 1) currentStep -= 1;
}
</script>
<section class="section mt-4">
<div class="col-xs-12">
<div class="col-6 my-4">
<ProgressStep currentStep={currentStep} steps={['Step 1', 'Step 2', 'Step 3', 'Step 4']} />
<div class="btn-group">
<button class="btn btn-secondary" on:click={()=>prevStep()}>Previous</button>
<button class="btn btn-primary" on:click={()=>nextStep()}>Next</button>
</div>
</div>
</div>
</section>
我想建立一个像codepen.io一样的一步进度条
它大约有 4 步进度,随着进度,连接每个步骤的线必须改变颜色,所以目前我遇到一些问题,进度无法正常工作,出了什么问题?