Vue.js에서 다단계 양식을 작성하는 방법.

여러분! 당신이 잘하고 있기를 바랍니다. 이 블로그는 슬롯의 도움으로 Vue.js에서 다단계 양식을 만드는 방법에 관한 것입니다.
읽기를 건너뛰거나 구성 요소를 직접 가져오려면 여기 링크가 있습니다.
https://github.com/yogeshgalav/vue-multi-step-form
https://www.npmjs.com/package/vue-multi-step-form

슬롯

간단한 언어로 된 슬롯은 사용될 상위 구성 요소에서 코드를 상속하거나 포함하는 데 사용됩니다.
따라서 필요에 따라 부모 구성 요소에서 직접 자식 구성 요소에 표시하거나 포함할 코드를 결정할 수 있습니다.
따라서 동적 HTML 또는 템플릿 또는 텍스트가 있는 동적 구성 요소가 있습니다.
우리는 주로 html이나 템플릿을 하위 구성 요소에 전달하려는 경우 슬롯을 사용합니다. props를 통해 전달한 다음 임베딩하는 것이 이상적인 일이 아니기 때문입니다.
여기에서 더 공부하고 싶다면 공식 문서에 대한 링크가 있습니다.
https://vuejs.org/guide/components/slots.html

특징

이제 다단계 양식으로 돌아가십시오.
구현하려는 몇 가지 기능은 다음과 같습니다.

n개의 단계를 지원해야 합니다.

Enter 키를 누르거나 제출 버튼을 누르면 다음 단계로 이동해야 합니다.

머리글과 바닥글도 슬롯을 통해 수정할 수 있어야 합니다.

단계를 건너뛸 수 있습니다.

현재 단계가 유효하지 않을 때 다음 단계를 방지합니다.

양식은 html 작업 속성으로도 제출할 수 있습니다.

건축물

양식이 html로 표시되는 방식은 다음과 같습니다.

<form>
<div id="step1">
<input type="text" name="phone_no">
</div>
<div id="step2">
<input type="text" name="otp">
</div>
<div id="step3">
<input type="text" name="first_name">
<input type="text" name="last_name">
</div>
</form>

그리고 여기 우리의 양식이 vue에서 어떻게 보이는지 보여줍니다.

로그인페이지.vue

<template>
  <MultiStepForm>
    <template slot="step1">
      <input type="text" name="phone_no">
    </template>
    <template slot="step2">
      <input type="text" name="otp">
    </template>
    <template slot="step3">
      <input type="text" name="first_name">
      <input type="text" name="last_name">
    </template>
  </MultiStepForm>
</template>

MultiStepForm.vue

<template>
  <form>
    <slot name="step1" />
    <slot name="step2" />
    <slot name="step3" />
  </form>
</template>

구현

기능 1
구성 요소가 'N'개의 단계를 지원하려면 반복할 배열이 필요합니다. 이 배열은 소품을 통해 부모 구성 요소에서 전달할 것입니다.

MultiStepForm.vue

<template>
  <form>
    <div 
    v-for="(step, index) in steps" 
    :key="index" :id="'step'+(index+1)">

    <slot 
    v-show="activeStepIndex===index" 
    :name="'step'+(index+1)" />

    </div>
  </form>
</template>

props:['steps'],
data(){
  return {
    activeStepIndex:0,
  };
}

기능 2
양식의 다음 단계로 이동하려면 제출 버튼을 누를 때 'activeStepIndex'를 늘리면 됩니다.

MultiStepForm.vue

  <form @submit.prevent="submitStep">
    <div 
    v-for="(step, index) in steps" 
    :key="index" :id="'step'+(index+1)">

    <slot 
    v-show="activeStepIndex===index" 
    :name="'step'+(index+1)" />

    </div>
    <button type="submit">Next</button>
  </form>

methods:{
  submitStep(){
    this.activeStepIndex++;
  }
}

기능 3
이제 모든 단계 또는 일부 숨겨진 입력 필드에 제목이나 디자인을 추가하거나 바닥글 또는 제출 버튼의 디자인을 수정하려는 경우 머리글 및 바닥글 슬롯을 통해 구현할 수 있습니다.

MultiStepForm.vue

  <form @submit.prevent="submitStep">
    <slot name="header" />
    <div 
    v-for="(step, index) in steps" 
    :key="index" :id="'step'+(index+1)">

    <slot 
    v-show="activeStepIndex===index" 
    :name="'step'+(index+1)" />

    </div>
    <slot name="footer">
      <button type="submit">Next</button>
    </slot>
  </form>

이제 여기에서 바닥글 슬롯에 기본 html을 제공했습니다. 즉, 부모 구성 요소에서 바닥글 슬롯을 언급하지 않으면 기본적으로 제출 버튼을 사용할 수 있으며 그렇지 않으면 부모에서 구현해야 합니다.

로그인페이지.vue

<template>
  <MultiStepForm :steps="steps">
    <template slot="header">
      <h1>Get Started -></h1>
    </template>
    <template slot="footer">
      <button class="btn btn-primary" 
       type="submit">Get OTP</button>
    </template>
    //steps slots
  </MultiStepForm>
</template>

기능 4
긴 형식이 있고 일부 로직을 기반으로 특정 단계를 동적으로 건너뛰고 싶다면 'steps' props 내부에 일부 데이터를 제공하여 이를 수행할 수 있습니다.

로그인페이지.vue

data(){
  return {
    steps:[
    {'step_no':1,'step_valid':false,'step_skip':false},
    {'step_no':2,'step_valid':false,'step_skip':true},
    {'step_no':3,'step_valid':false,'step_skip':false},
    ],
  };
}

또한 이제 단계를 건너뛰는 논리를 구현하는 데 필요한 데이터를 준비했습니다. 또한 마지막 단계인 경우 어떠한 조치도 취하지 않도록 주의해야 합니다.

MultiStepForm.vue

submitStep(){
  if(this.activeStepIndex === this.steps.length){
    //final step
    this.$emit('onComplete');
    return false;
  }
  this.activeStepIndex++;
  while(this.steps[this.activeStepIndex].step_skip===true){
    this.activeStepIndex++;
  }
}

기능 5
다단계 양식에 필요한 대부분의 기능을 구현한 것 같습니다. 이제 현재 단계가 유효한지 확인하려는 다음 단계로 넘어가겠습니다. 유효하지 않은 경우 일부 양식 오류를 표시하고 사용자가 다음 단계로 이동하도록 제한합니다.
단계 개체 내에서 'step_valid'를 사용했음을 기억하고 사용하겠습니다.

MultiStepForm.vue

submitStep(){
  if(!this.steps[this.activeStepIndex].step_valid){
    this.$emit('valdiateStep', this.stepIndex);
    return false;
  }
  //increase activeStepIndex
}

로그인페이지.vue

<template>
  <MultiStepForm
  ref="multiStepForm"
  :steps="steps"
  @onComplete="submitForm"
  @validateStep="validateStep">
   //slots
  </MultiStepForm>
</template>

validateStep(stepIndex){
  //run validation of step
  //if step is valid then
  this.steps[stepIndex].step_valid=true;
  this.$refs.multiStepForm.submitStep();
  //else show errors
}
submitForm(){
  //api call to submit all data via post request
  //redirect to somewhere
}

유효성 검사 라이브러리를 구현하는 동안 문제가 발생하는 경우 필요에 맞는 간단한 유효성 검사 패키지가 있습니다.
https://www.npmjs.com/package/vue-nice-validate

기능 6
이제 마지막 단계는 이전 방식을 통해 양식을 제출하는 것입니다.
액션 소품이 부모로부터 제공되는 경우 html 액션 및 메소드를 통해.
MultiStepForm 구성 요소는 다음과 같습니다.

MultiStepForm.vue

<form :id="id" :action="action" :method="method">

props:['steps','id','action','method']

submitStep(){
  if(!this.steps[this.activeStepIndex].step_valid){
    this.$emit('valdiateStep', this.stepIndex);
    return false;
  }
  isLastStep = (this.activeStepIndex==this.steps.length);
  if(isLastStep && this.action){
    this.submitForm();
    return true;
  }
  if(isLastStep){
    this.$emit('onComplete');
    return true;
  }
  this.activeStepIndex++;
  while(this.steps[this.activeStepIndex].step_skip===true){
    this.activeStepIndex++;
  }

즐겁게 읽으셨기를 바랍니다.
제 Github 오픈 소스 리포지토리에 많은 사랑과 지원을 부탁드립니다.
어딘가에 갇혀 있거나 프로젝트를 아웃소싱해야 하는 경우 언제든지 저희를 고용하십시오.

감사합니다. 좋은 하루 보내세요!