vue 및 Element-plus를 사용하여 단계별 양식 및 양식 확인을 구현하는 방법

Vue 및 Element Plus를 사용하여 단계별 양식 및 양식 확인을 구현하는 방법

웹 개발에서 양식은 가장 일반적인 사용자 상호 작용 구성 요소 중 하나입니다. 복잡한 양식의 경우 단계별 채우기 및 양식 확인 기능을 수행해야 하는 경우가 많습니다. 이 기사에서는 Vue 및 Element Plus 프레임워크를 사용하여 이 두 가지 기능을 구현하는 방법을 소개합니다.

1. 단계별 양식

단계별 양식은 큰 양식을 여러 개의 작은 단계로 나누어 사용자가 단계에 따라 단계를 작성해야 하는 것을 말합니다. 이 기능을 달성하기 위해 Vue의 구성 요소화 및 라우팅 기능을 사용할 수 있습니다.

먼저 전체 단계별 양식을 렌더링하려면 상위 구성 요소 FormStep을 만들어야 합니다. 이 구성 요소에서는 Vue Router를 사용하여 다양한 단계 간의 라우팅 점프를 관리해야 합니다.

<template>
  <div>
    <router-view></router-view>
    <el-steps :active="currentStep" align-center>
      <el-step v-for="(item, index) in steps" :key="index" :title="item.title"></el-step>
    </el-steps>
    <el-button type="primary" @click="prevStep" v-show="currentStep > 0">上一步</el-button>
    <el-button type="primary" @click="nextStep" v-show="currentStep < steps.length - 1">下一步</el-button>
    <el-button type="success" @click="submit" v-show="currentStep === steps.length - 1">提交</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentStep: 0, // 当前所在步骤
      steps: [
        { title: '步骤一', component: StepOne },
        { title: '步骤二', component: StepTwo },
        { title: '步骤三', component: StepThree }
      ]
    }
  },
  
  methods: {
    prevStep() {
      this.currentStep--
    },
    
    nextStep() {
      this.currentStep++
    },
    
    submit() {
      // 提交表单数据
    }
  },
  
  components: {
    StepOne,
    StepTwo,
    StepThree
  }
}
</script>

위 코드에서는 현재 단계의 index currentStep과 각 단계의 제목과 해당 구성 요소를 포함하는 각 단계의 구성 단계가 포함된 데이터 개체를 정의합니다.

다음으로 각 단계의 구성 요소를 정의해야 합니다. StepOne을 예로 들어보겠습니다.

<template>
  <div>
    <el-form>
      <el-form-item label="姓名">
        <el-input v-model="name"></el-input>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="age"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      age: ''
    }
  }
}
</script>

위 코드에서는 Element Plus의 양식 구성 요소 el-form 및 el-form-item을 사용하고 v-model 명령어를 사용하여 입력 상자의 값을 양방향으로 바인딩합니다. 물론입니다.

마찬가지로 각각의 양식 항목을 포함하는 StepTwo 및 StepThree 구성 요소를 만들 수 있습니다.

다음으로 라우팅 구성에서 해당 라우팅 규칙을 정의해야 합니다. main.js에서 라우팅 구성:

import Vue from 'vue'
import VueRouter from 'vue-router'
import FormStep from './components/FormStep'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: FormStep }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

new Vue({
  router
}).$mount('#app')

이제 단계별 양식 구성이 완료되었습니다. 사용자는 단계에 따라 양식을 작성하고 이전 버튼과 다음 버튼을 통해 단계 간을 전환할 수 있습니다.

2. 양식 확인

실제 개발에서는 입력 데이터가 예상 규칙을 준수하는지 확인하기 위해 사용자가 제출한 양식 데이터를 확인해야 하는 경우가 많습니다. Element Plus는 쉽게 검증을 수행할 수 있는 다양한 양식 검증 방법과 구성 요소를 제공합니다.

먼저 양식 구성 요소에서 유효성 검사 규칙을 정의해야 합니다. StepOne을 예로 들어보겠습니다.

<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules">
      <el-form-item label="姓名" prop="name" :rules="[{ required: true, message: '请输入姓名' }]">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model.number="form.age"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        age: null
      },
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        age: [
          { type: 'number', required: true, message: '请输入年龄', trigger: 'blur' },
          { type: 'number', min: 18, max: 60, message: '年龄必须在18到60之间', trigger: 'blur' }
        ]
      }
    }
  },
  
  methods: {
    validateForm() {
      return new Promise((resolve, reject) => {
        this.$refs.form.validate(valid => {
          if (valid) {
            resolve()
          } else {
            reject()
          }
        })
      })
    }
  }
}
</script>

위 코드에서는 el-form-item의 prop 속성을 통해 필드 이름을 설정하고 각 필드에 해당하는 확인 규칙을 정의합니다. 전체 양식은 $refs.form.validate 메소드를 통해 확인됩니다.

다음으로 양식 확인을 위해 제출 버튼의 클릭 이벤트에서 verifyForm 메서드를 호출해야 합니다.

<el-button type="success" @click="submit" v-show="currentStep === steps.length - 1">提交</el-button>

methods: {
  async submit() {
    try {
      await this.$refs.form.validateForm()
      // 校验通过，提交表单数据
    } catch (error) {
      // 校验未通过，不提交表单数据
    }
  }
}

위 코드를 통해 양식을 제출하기 전에 양식 데이터를 확인할 수 있으며 확인이 통과된 경우에만 제출됩니다. .

요약

이 글에서는 Vue와 Element Plus를 사용하여 단계별 양식 구현 및 양식 확인 기능을 구현하는 방법을 소개합니다. Vue Router와 컴포넌트화 아이디어를 사용하여 단계별 폼 레이아웃과 점프를 구현할 수 있습니다. Element Plus의 양식 구성 요소 및 확인 방법을 사용하면 양식 데이터를 쉽게 확인할 수 있습니다.

위 내용은 Vue와 Element Plus를 사용하여 단계별 양식을 구현하고 양식 확인하는 방법입니다.

위 내용은 vue 및 Element-plus를 사용하여 단계별 양식 및 양식 확인을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!