양식 및 데이터 입력은 항상 모든 웹 애플리케이션의 필수 요소입니다. 때때로 웹 앱은 사용자에게 일련의 입력을 제공해야 할 수 있습니다. 다단계 양식은 훌륭하고 독특한 사용자 경험으로 이 목표를 달성하는 데 도움이 됩니다. 오늘 우리는 typescript와 Tailwindcss 및 daisyUI을 사용하여 vue에서 다단계 양식을 빌드할 것입니다. 둘 다 일반 css로 컴파일되므로 번들 크기가 증가하지 않습니다.

완제품here을 확인하거나 소스 코드here를 살펴볼 수 있습니다.

설정

프로젝트는 vue-ts 템플릿과 함께 vite을 사용하여 스캐폴드되었습니다. 아래 명령을 실행하고 vue 옵션에서 템플릿으로 vue-ts를 선택합니다.

npm create vite

tailwindcss에 대한 설치 지침을 찾을 수 있습니다here. 그들의 문서는 훌륭하므로 그곳에서 더 좋은 시간을 보낼 것입니다 😇.

daisyUI를 설치하려면 다음을 실행하십시오.

npm i daisyUI --save-dev

그런 다음 tailwind.config.js 파일에 daisyUI를 추가합니다.

module.exports = {
  //...
  plugins: [require("daisyui")],
}

양식 단계

다단계 양식의 각 섹션은 고유한 개별 구성 요소입니다. 이를 통해 구현을 모듈화할 수 있으므로 개별 요소가 다른 구성 요소의 관심을 제한하면서 자체 데이터 바인딩 및 논리를 관리할 수 있습니다.

다음은 몇 가지 샘플 단계(tailwind 및 daisyUI 스타일)이지만 자유롭게 실험해 보세요.

1단계 → ./src/components/Step1.vue

<template>
    <div class="form-control w-full">
      <label class="label">
        <span class="label-text">What is your name?</span>
      </label>
      <input type="text" placeholder="Type here" class="input input-bordered w-full" />
    </div>
    <div class="form-control max-w-xs pt-4">
      <label class="cursor-pointer label">
        <span class="label-text">I am awesome</span>
        <input type="checkbox" checked="checked" class="checkbox" />
      </label>
    </div>
</template>

2단계 → ./src/components/Step2.vue

<template>
    <div class="form-control w-full">
      <label class="label">
        <span class="label-text">Pick the best fantasy franchise</span>
      </label>
      <select class="select select-bordered">
        <option disabled selected>Pick one</option>
        <option>Star Wars</option>
        <option>Harry Potter</option>
        <option>Lord of the Rings</option>
        <option>Planet of the Apes</option>
        <option>Star Trek</option>
      </select>
    </div>
</template>

3단계 → ./src/components/Step3.vue

<template>
    <div class="form-control w-full flex items-center justify-center">
    <h2 class="text-xl py-3">Rate this tutorial</h2>
        <div class="rating rating-lg">
          <input type="radio" name="rating-9" class="rating-hidden" />
          <input type="radio" name="rating-9" class="mask mask-star-2" />
          <input type="radio" name="rating-9" class="mask mask-star-2" checked />
          <input type="radio" name="rating-9" class="mask mask-star-2" />
          <input type="radio" name="rating-9" class="mask mask-star-2" />
          <input type="radio" name="rating-9" class="mask mask-star-2" />
        </div>
    </div>
</template>

단계 및 단계 진행률 표시

단일 클래스 정의로 진행률 표시기의 우아한 스타일을 지정하는 데 daisyUI의 강력한 클래스 스타일이 유용합니다.

./src/components/MultiStepForm.vue → 템플릿 섹션

<template>
    <div class="w-6/12">
        <ul class="steps min-w-full">
            <li v-for="(stepText,index) in props.steps" class="step" :class="index<=step ? 'step-primary' : ''">
                {{stepText}}
            </li>
        </ul>
    </div>
</template>

./src/components/MultiStepForm.vue → 스크립트 섹션

<script lang="ts" setup>
import {ref} from "vue"

let step = ref(0);
const props = defineProps<{
    steps:string[],
}>()
</script>

이제 새 구성 요소를 App.vue 파일로 가져옵니다.

./src/App.vue

<template>
  <div class="flex flex-col items-center justify-center h-screen">
    <MultiStepForm :steps="['Personal information 👶','Series 📺','Feedback 🌟']"/>
  </div>
</template>

<script lang="ts" setup>
 import MultiStepForm from "./components/MultiStepForm.vue" 
</script>

이제 페이지가 이와 유사하게 보일 것입니다.

단계 구성 요소를 소품으로 수락

typescript(특히 유형 추론)의 힘 덕분에 typesafety가 있는 MultiStepForm 구성 요소의 소품으로 vue 구성 요소를 수락할 수 있습니다.

./src/components/MultiStepForm.vue → 스크립트 섹션

<script lang="ts" setup>
// ....
import Step1 from "./Step1.vue"
// ...
const props = defineProps<{
    forms:typeof Step1[], // inferring the component type of one of our steps 
    steps:string[],
}>()
</script>

양식 내 구성 요소 렌더링

이제 vue의 특수 내장 요소component를 사용하여 props로 받은 구성 요소를 렌더링할 수 있습니다.

./src/components/MultiStepForm.vue → 템플릿 섹션

<template>
<!-- ...progress indicator... -->
<div class="py-3"></div> 
<form @submit.prevent class="min-w-full px-6"> 
  <component :is="props.forms[step]"></component>
    <div class="py-4"></div> 
    <div class="flex justify-end">
      <button class="btn btn-ghost" type="button" v-if="step!==0" @click="step--">Back</button>
      <button class="btn btn-primary" type="submit" v-if="step!==props.steps.length-1">Next</button>
      <button class="btn btn-primary" type="submit" v-if="step==props.steps.length-1">Submit</button>
    </div>
</form>
</div>
</template>

다음 및 이전 단계 논리 추가

구성 요소 배열을 통과하려면 반응 변수 단계의 값을 증가시키기만 하면 됩니다. 또한 뒤로, 다음 및 제출 버튼이 특정 개념적 환경에서만 활성화되도록 해야 합니다.

./src/components/MultiStepForm.vue → 스크립트 섹션

<template>
<!-- within the form -->
  <div class="py-4"></div> 
  <div class="flex justify-end">
    <button class="btn btn-ghost" type="button" v-if="step!==0" @click="step--">Back</button>
    <button class="btn btn-primary" type="submit" v-if="step!==props.steps.length-1">Next</button>
    <button class="btn btn-primary" type="submit" v-if="step==props.steps.length-1">Submit</button>
  </div>
<!-- within the form -->
</template>

최종 제출 처리

이제 모든 단계가 완료되면 실행할 구성 요소에 대한 prop으로 submitFunction을 전달하고 수락합니다.

./src/components/MultiStepForm.vue → 스크립트 섹션

<script lang="ts" setup>
// ...
const props = defineProps<{
  forms: typeof Step1[];
  steps: string[];
  submitAction: () => void;
}>();

const formAction = () => {
  if (step.value !== props.steps.length - 1) return step.value++;
  props.submitAction();
};
// ...
</script>

./src/App.vue

<template>
  <div class="flex flex-col items-center justify-center h-screen">
    <MultiStepForm :forms="forms" :steps="['Personal information 👶','Series 📺','Feedback 🌟']" 
      :submit-action="submitAction"
    />
  </div>
</template>

<script lang="ts" setup>
 import MultiStepForm from "./components/MultiStepForm.vue" 
 import Step1 from "./components/Step1.vue"
 import Step2 from "./components/Step2.vue"
 import Step3 from "./components/Step3.vue"

 const forms = [Step1,Step2,Step3]
 const submitAction = () => {console.log("submitting form...")}
</script>

요약

tailwindcss 및 daisyUI를 통해 우아한 디자인과 UX로 vue에서 다단계 형식의 유형 안전 구현이 있습니다. 빠른 참조를 위해 아래 👇의 코드 및 상자를 확인할 수도 있습니다.



GitHub에서 소스 코드를 찾을 수 있습니다. 이 튜토리얼이 도움이 된다면 프로젝트를 시작해 보세요!