Vue+ElementUI实现向导式弹出框

向导式对话框简介

向导式对话框是一种非常友好的界面,它能够引导用户一步步的输入信息

页面效果

点击按钮，弹出向导式弹框

点击【下一步】，在对话框中进行向导式跳转

点击【提交】，可提交信息

Vue+ElementUI实现向导式弹框

点击【打开弹窗】按钮，调用openDig方法，打开向导式弹出框

openDig方法如下：

active与步骤条:active属性绑定，控制步骤条进度，打开弹窗时重置active，保证每次打开弹窗后，步骤条都是从起始位置开始

open为布尔值，与弹出框的:visible.sync属性绑定，控制弹出框是否显示

el-dialog中，title为弹框名称，:visible.sync设置弹窗是否隐藏，width设置弹框宽度

dialog弹框组件中可分为三个部分来理解：

1：步骤条组件部分

2：表单组件部分

3：按钮组件部分

在data中定义:visible.sync的值open

步骤条组件部分

active设置当前激活步骤，默认为0，通过设置active的值来设置步骤条的状态

在data中定义active的值active

表单组件部分

通过v-if判断active的值，满足条件则展示表单输入框，与步骤条同步

设置表单的样式

在data中设置editForm，用来设置表单数据

按钮组件部分

与表单部分相同，通过v-if判断控件是否展示

prve方法与next方法用于执行控制active值，从而达到动态控制向导页面的效果

submitForm方法用于执行关闭弹框

完整代码如下：

<template>
  <div class="app-container">
    <el-button type="primary" @click="openDig">打开弹窗</el-button>
    <!--点击按钮,调用openDig方法-->

    <el-dialog title="新建任务" :visible.sync="open" width="650px">
      <!--:visible指的是属性绑定，表示弹框的显示隐藏-->
      <el-steps :active="active">
        <!--.sync指的就是同步动态，双向的来表示visible的值-->
        <el-step title="步骤 1"></el-step>
        <!--active为0时，为选中状态-->
        <el-step title="步骤 2"></el-step>
        <!--active为1时，为选中状态-->
        <el-step title="步骤 3"></el-step>
        <!--active为2时，为选中状态-->
      </el-steps>

      <div class="el-dialog-div">
        <el-form
          ref="editForm"
          :model="editForm"
          label-width="50px"
          style="margin-top:20px; margin-right:40px"
        >
          <el-form-item v-if="active===0" label="user" prop="user">
            <!--当active为0时显示控件-->
            <el-input v-model="editForm.user" placeholder="请输入1" />
          </el-form-item>

          <el-form-item v-if="active===1" label="test" prop="test">
            <!--当active为1时显示控件-->
            <el-input v-model="editForm.algorithm_id" placeholder="请输入2" />
          </el-form-item>
          <el-form-item v-if="active===1" label="test1" prop="test1">
            <!--当active为1时显示控件-->
            <el-input v-model="editForm.test1" placeholder="请输入2" />
          </el-form-item>

          <el-form-item v-if="active===2" label="file" prop="file">
            <!--当active为2时显示控件-->
            <el-input v-model="editForm.file" placeholder="请输入3" />
          </el-form-item>
        </el-form>
      </div>

      <el-row style="position: absolute; right: 20px; bottom:20px">
        <el-button id="prveBtn" type="primary" plain @click="prve" v-if="active===1||active===2">上一步</el-button>
        <!--当active为1或2时显示按钮，点击执行prve方法-->
        <el-button id="nextBtn" type="primary" plain @click="next" v-if="active===0||active===1">下一步</el-button>
        <!--当active为1或0时显示按钮，点击执行next方法-->
        <el-button type="primary" @click="submitForm" v-if="active===2">提交</el-button>
        <!--调用submitForm方法，关闭对话框-->
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      open: false, //定义open并设置初始值为false，默认弹出框不显示
      active: 0, //定义并设置active初始值
      editForm: {}
    };
  },
  methods: {
    openDig() {
      this.active = 0; //重置active
      this.open = true; //设置open为true显示dialog对话框
    },
    prve() {
      --this.active;//active自减一
      if (this.active < 0) this.active = 0;//设置active最小值
    },
    next() {
      ++this.active;
      if (this.active > 2) this.active = 2;
    },
    submitForm() {
      this.open = false; //设置open为false关闭dialog对话框
    }
  }
};
</script>

<style scoped>
.el-dialog-div {
  height: 60vh;
}
</style>