dcqcComponent

Appearance

dStepsForm 分步表单 ​

自带了一个进度条的分步表单，和管理进度条的相关 API.

基础用法 ​

查看源码
vue
<template>
  <div>
    <d-steps-form>
      <d-step-form
        title="Step 1"
        :model="model.form1"
        :stepProps="{ description: 'description' }"
        :rules="rules1"
      >
        <el-form-item label="Activity name" prop="name">
          <el-input v-model="model.form1.name" />
        </el-form-item>
      </d-step-form>

      <d-step-form title="Step 2" :model="model.form2" :rules="rules1">
        <el-form-item label="Activity2 name" prop="name">
          <el-input v-model="model.form2.name" />
        </el-form-item>
      </d-step-form>

      <d-step-form title="Step 3" :model="model.form3" :rules="rules1">
        <el-form-item label="Activity3 name" prop="name">
          <el-input v-model="model.form3.name" />
        </el-form-item>
      </d-step-form>
    </d-steps-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { ElInput, ElFormItem } from 'element-plus';
import { DStepsForm, DStepForm } from 'dc-pro-component';

const model = reactive({
  form1: {
    name: 'step1 name',
  },
  form2: {
    name: '',
  },
  form3: {
    name: '',
  },
});
const rules1 = {
  name: [{ required: true }],
};
</script>
<template>
  <div>
    <d-steps-form>
      <d-step-form
        title="Step 1"
        :model="model.form1"
        :stepProps="{ description: 'description' }"
        :rules="rules1"
      >
        <el-form-item label="Activity name" prop="name">
          <el-input v-model="model.form1.name" />
        </el-form-item>
      </d-step-form>

      <d-step-form title="Step 2" :model="model.form2" :rules="rules1">
        <el-form-item label="Activity2 name" prop="name">
          <el-input v-model="model.form2.name" />
        </el-form-item>
      </d-step-form>

      <d-step-form title="Step 3" :model="model.form3" :rules="rules1">
        <el-form-item label="Activity3 name" prop="name">
          <el-input v-model="model.form3.name" />
        </el-form-item>
      </d-step-form>
    </d-steps-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { ElInput, ElFormItem } from 'element-plus';
import { DStepsForm, DStepForm } from 'dc-pro-component';

const model = reactive({
  form1: {
    name: 'step1 name',
  },
  form2: {
    name: '',
  },
  form3: {
    name: '',
  },
});
const rules1 = {
  name: [{ required: true }],
};
</script>

垂直布局 ​

查看源码
vue
<template>
  <div>
    <d-steps-form direction="vertical">
      <d-step-form
        title="Step 1"
        :model="model.form1"
        :stepProps="{ description: 'description' }"
        :rules="rules1"
      >
        <el-form-item label="Activity name" prop="name">
          <el-input v-model="model.form1.name" />
        </el-form-item>
      </d-step-form>

      <d-step-form title="Step 2" :model="model.form2" :rules="rules1">
        <el-form-item label="Activity2 name" prop="name">
          <el-input v-model="model.form2.name" />
        </el-form-item>
      </d-step-form>

      <d-step-form title="Step 3" :model="model.form3" :rules="rules1">
        <el-form-item label="Activity3 name" prop="name">
          <el-input v-model="model.form3.name" />
        </el-form-item>
      </d-step-form>
    </d-steps-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { ElInput, ElFormItem } from 'element-plus';
import { DStepsForm, DStepForm } from 'dc-pro-component';

const model = reactive({
  form1: {
    name: 'step1 name',
  },
  form2: {
    name: '',
  },
  form3: {
    name: '',
  },
});
const rules1 = {
  name: [{ required: true }],
};
</script>
<template>
  <div>
    <d-steps-form direction="vertical">
      <d-step-form
        title="Step 1"
        :model="model.form1"
        :stepProps="{ description: 'description' }"
        :rules="rules1"
      >
        <el-form-item label="Activity name" prop="name">
          <el-input v-model="model.form1.name" />
        </el-form-item>
      </d-step-form>

      <d-step-form title="Step 2" :model="model.form2" :rules="rules1">
        <el-form-item label="Activity2 name" prop="name">
          <el-input v-model="model.form2.name" />
        </el-form-item>
      </d-step-form>

      <d-step-form title="Step 3" :model="model.form3" :rules="rules1">
        <el-form-item label="Activity3 name" prop="name">
          <el-input v-model="model.form3.name" />
        </el-form-item>
      </d-step-form>
    </d-steps-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { ElInput, ElFormItem } from 'element-plus';
import { DStepsForm, DStepForm } from 'dc-pro-component';

const model = reactive({
  form1: {
    name: 'step1 name',
  },
  form2: {
    name: '',
  },
  form3: {
    name: '',
  },
});
const rules1 = {
  name: [{ required: true }],
};
</script>

自定义分步表单按钮 ​

查看源码
vue
<template>
  <div>
    <d-steps-form
      ref="refForm"
      @finish="handleFinish"
      v-model:currentStep="currentStep"
    >
      <d-step-form
        title="Step 1"
        :model="model.form1"
        :stepProps="{ description: 'description' }"
        :rules="rules1"
      >
        <el-form-item label="Activity name" prop="name">
          <el-input v-model="model.form1.name" />
        </el-form-item>
      </d-step-form>

      <d-step-form title="Step 2" :model="model.form2" :rules="rules2">
        <el-form-item label="Activity2 name" prop="name">
          <el-input v-model="model.form2.name" />
        </el-form-item>
      </d-step-form>

      <d-step-form title="Step 3" :model="model.form3" :rules="rules1">
        <el-form-item label="Activity3 name" prop="name">
          <el-input v-model="model.form3.name" />
        </el-form-item>
      </d-step-form>

      <template #submitter>
        <div>
          <el-button
            v-show="currentStep > 0"
            @click="() => refForm?.prevStep()"
            type="info"
            >prev</el-button
          >
          <el-button type="danger" @click="() => refForm?.nextStep()"
            >next</el-button
          >
        </div>
      </template>
    </d-steps-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { ElInput, ElFormItem, ElButton } from 'element-plus';
import { DStepsForm, DStepForm } from 'dc-pro-component';

const model = reactive({
  form1: {
    name: 'Step1 name',
  },
  form2: {
    name: '',
  },
  form3: {
    name: '',
  },
});
const rules1 = {
  name: [{ required: true }],
};

const rules2 = {
  name: [{ required: true, message: 'error' }],
};

const refForm = ref<null | InstanceType<typeof DStepsForm>>(null);

async function handleFinish(values: any, done) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(values);
      done();
    }, 3 * 1000);
  });
}

const currentStep = ref(0);
</script>
<template>
  <div>
    <d-steps-form
      ref="refForm"
      @finish="handleFinish"
      v-model:currentStep="currentStep"
    >
      <d-step-form
        title="Step 1"
        :model="model.form1"
        :stepProps="{ description: 'description' }"
        :rules="rules1"
      >
        <el-form-item label="Activity name" prop="name">
          <el-input v-model="model.form1.name" />
        </el-form-item>
      </d-step-form>

      <d-step-form title="Step 2" :model="model.form2" :rules="rules2">
        <el-form-item label="Activity2 name" prop="name">
          <el-input v-model="model.form2.name" />
        </el-form-item>
      </d-step-form>

      <d-step-form title="Step 3" :model="model.form3" :rules="rules1">
        <el-form-item label="Activity3 name" prop="name">
          <el-input v-model="model.form3.name" />
        </el-form-item>
      </d-step-form>

      <template #submitter>
        <div>
          <el-button
            v-show="currentStep > 0"
            @click="() => refForm?.prevStep()"
            type="info"
            >prev</el-button
          >
          <el-button type="danger" @click="() => refForm?.nextStep()"
            >next</el-button
          >
        </div>
      </template>
    </d-steps-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { ElInput, ElFormItem, ElButton } from 'element-plus';
import { DStepsForm, DStepForm } from 'dc-pro-component';

const model = reactive({
  form1: {
    name: 'Step1 name',
  },
  form2: {
    name: '',
  },
  form3: {
    name: '',
  },
});
const rules1 = {
  name: [{ required: true }],
};

const rules2 = {
  name: [{ required: true, message: 'error' }],
};

const refForm = ref<null | InstanceType<typeof DStepsForm>>(null);

async function handleFinish(values: any, done) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(values);
      done();
    }, 3 * 1000);
  });
}

const currentStep = ref(0);
</script>

StepsForm API ​

StepsForm 属性 ​

参数说明类型可选值默认值
direction布局方向enum'horizontal' 'vertical'horizontal
prevBtnProps分步表单按钮属性, el-button Attributesobject-
nextBtnProps分步表单按钮属性, el-button Attributesobject-
currentStep设置当前激活步骤number-

StepsForm 事件 ​

事件名说明回调参数
stepFinish步骤提交成功触发currentStep values
finish最后一步提交成功触发values callback

StepsForm 方法 ​

方法名说明参数
prevStep跳转至上一步-
nextStep跳转至下一步-

StepsForm 插槽 ​

插槽名说明子标签
default默认插槽StepForm

StepForm API ​

StepForm 属性 ​

参数说明类型可选值默认值
title步骤标题string''
stepProps步骤条属性, el-step Attributesobject-
...其他属性参考el-form Attributesobject

StepForm 方法 ​

方法名说明参数
...参考el-form-

StepForm 插槽 ​

插槽名说明子标签
default默认插槽FormItem

贡献者 ​

Released under the MIT License.

Copyright © 2023-present Evan You