一个在el-dialog里使用el-step的例子,
很多细节还要慢慢抠。
<el-dialog width="80%" :visible="dialogVisible"> <el-steps :active="active" align-center > <el-step title="新建发布单" > <i class="el-icon-document" slot="icon" /> </el-step> <el-step title="生成镜像" description="此镜像可再建发布单上线"> <i class="el-icon-upload" slot="icon" /> </el-step> <el-step title="上线" description="可多次上线不同环境的k8s集群"> <i class="el-icon-refresh" slot="icon" /> </el-step> <el-step title="完结" description="达到完成状态,发布单不可再操作"> <i class="el-icon-sold-out" slot="icon" /> </el-step> </el-steps> <br/> <br/> <div v-if='active===0'> <el-form :model="dataForm" label-width="100px" :rules="dataFormRules" ref="dataForm" :size="size" label-position="right"> <el-row> <el-col :span="12"> <el-form-item label="发布单" prop="name"> <el-input v-model="dataForm.name" :readonly=true auto-complete="off"></el-input> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="描述" prop="description"> <el-input v-model="dataForm.description" :readonly="readonly" auto-complete="off"></el-input> </el-form-item> </el-col> </el-row> <el-form-item label="ID" prop="id" v-if="false"> <el-input v-model="dataForm.id" :disabled="true" auto-complete="off"></el-input> </el-form-item> <el-row> <el-col :span="12"> <el-form-item label="Git" prop="gitBranch"> <el-input v-model="dataForm.gitBranch" :readonly="readonly" auto-complete="off"></el-input> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="构建参数" prop="build" > <el-select v-model="dataForm.build" placeholder="请选择" style="width: 100%;"> <el-option v-for="item in build" :key="item.id" :label="item.name" :value="item.id"></el-option> </el-select> </el-form-item> </el-col> </el-row> </el-form> <el-button type="danger" @click.native="save">保存</el-button> <el-button type="info" @click.native="createNext">下一步</el-button> </div> <el-form v-if='active===1' :model="dataForm" label-width="100px" ref="buildDockerForm" :size="size" label-position="right"> <el-row> <el-col :span="12"> <el-form-item label="发布单" prop="name"> <el-input v-model="dataForm.name" :readonly=true auto-complete="off"></el-input> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="描述" prop="description"> <el-input v-model="dataForm.description" :readonly=true auto-complete="off"></el-input> </el-form-item> </el-col> </el-row> <el-form-item label="ID" prop="id" v-if="false"> <el-input v-model="dataForm.id" :disabled="true" auto-complete="off"></el-input> </el-form-item> <el-button type="danger" @click.native="buildDocker">构建镜像</el-button> <el-button type="info" @click.native="buildNext">下一步</el-button> </el-form> <el-form v-if='active===2' :model="dataForm" label-width="100px" ref="k8sDataForm" :size="size" label-position="right"> <el-row> <el-col :span="12"> <el-form-item label="发布单" prop="name"> <el-input v-model="dataForm.name" :readonly=true auto-complete="off"></el-input> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="描述" prop="description"> <el-input v-model="dataForm.description" :readonly=true auto-complete="off"></el-input> </el-form-item> </el-col> </el-row> <el-form-item label="ID" prop="id" v-if="false"> <el-input v-model="dataForm.id" :disabled="true" auto-complete="off"></el-input> </el-form-item> <el-row> <el-col :span="12"> <el-form-item label="K8s集群" prop="k8s" > <el-select v-model="dataForm.k8s" placeholder="请选择" style="width: 100%;"> <el-option v-for="item in k8s" :key="item.id" :label="item.name" :value="item.id"></el-option> </el-select> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="Yaml模板" prop="yaml" > <el-select v-model="dataForm.yaml" placeholder="请选择" style="width: 100%;"> <el-option v-for="item in yaml" :key="item.id" :label="item.name" :value="item.id"></el-option> </el-select> </el-form-item> </el-col> </el-row> <el-button type="danger" @click.native="deployK8s">集群部署</el-button> <el-button type="info" @click.native="finishDeploy">结单</el-button> </el-form> <el-form v-if='active===3' :model="dataForm" label-width="100px" ref="dataForm" :size="size" label-position="right"> <el-button type="danger" @click.native="confirmFinish">确认结单</el-button> </el-form> <div slot="footer" class="dialog-footer"> <el-button :size="size" @click.native="closeDialog">关闭</el-button> </div> </el-dialog>