element步骤条实战

文件StepManger.vue

<template><div><el-steps:active="stepActive"finish-status="process"process-status="wait"align-center><el-step v-for="step in data.steps" :key="step" :title="step"/></el-steps><slot/> // 由父组件放置路由<footer><el-buttonv-if="stepActive>1"type="default"size="medium"@click.native.prevent="preStep()">上一步</el-button><el-button v-if="stepActive!=data.steps.length"type="primary"size="medium"@click.native.prevent="nextStep">保存，并下一步</el-button><el-buttonv-if="stepActive===data.steps.length"type="primary"size="medium":loading="data.save"@click.native.prevent="nextStep()">{{ data.finalStep }}</el-button></footer></div>
</template>

export default{inject:['data'],data(){return{back:1,//切换子路由的次数，默认当前路由记为1，每切换步骤自增1stepActive:1}},methods:{init(){this.back+=1},preStep(){this.stepActive-=1this.back+=1this.$emit('preStep',this.stepActive)},nextStep(){// 下一步由父组件来操作this.$emit('nextStep',this.stepActive)},next(){this.stepActive+=1this.back+=1}}
}

文件operation.vue

<StepManagerref="step"@preStep="preStep"@nextStep="nextStep"
><router-view/>
</StepManger>

export default{provide(){return{//绑定对象的一个好处是可以通过父组件更新值，并注入到子组件data:this.info}},data(){info:{finalStep:'保存'steps:['基础信息','资源登记','实例登记'],save:false}},methods:{preStep(){this.$router.go(-1)},nextStep(step){// 步骤条可无限扩展，当分支多的话，可用switch caseif(step==1){// 第一步的保存操作save1()}if(step==2){save2()}if(step==3){save3()}},save1(){// 进入下一步，可在调用下一步进行表单校验等操作this.$refs.step.next()},save2(){// 进入下一步，可在调用下一步进行表单校验等操作this.$refs.step.next()},save3(){// 进入下一步，可在调用下一步进行表单校验等操作this.$refs.step.next()}}
}

效果图

element步骤条实战相关推荐

2018 年将打响 AI 战争，7 条实战经验帮你战胜恐惧
来源:36氪概要:不管是对科技巨头还是对创业公司,人工智能可以说是移动互联网时代以来最大的一个机遇.但是,人工智能同时也是让大多数人感到非常困惑的一项新技术,对它的发展现状和未来都非常迷惑. 不管是 ...
038_Steps步骤条
1. Steps步骤条 1.1. Steps步骤条引导用户按照流程完成任务的分步导航条, 可根据实际应用场景设定步骤, 步骤不得少于2步. 1.2. Steps Attributes 参数说明类型 ...
ElementUI自定义icon步骤条
在使用ElementsUI中的步骤条时,有时会遇到自定义icon的情况.但element icon数量不多,可能找不到需要的. 这时我们可以自定义icon,同样通过类来引用.首先我们先下载好需要的ic ...
前端学习（1998）vue之电商管理系统电商系统之实现步骤条和tab栏的数据
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
前端学习（1996）vue之电商管理系统电商系统之美化步骤条
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
steps 步骤条中插入自定义描述description
在vue框架中使用element的el-steps步骤条标签,想达到如下图结果: 因为后台就一条数据所以目前图片就展示一条缴费记录代码html部分 <el-steps :active=&quo ...
Vue学习笔记：Vue中封装自定义步骤条实现上下一步
Vue中封装自定义步骤条实现上下一步效果图: 如上图:在VUE中实现效果,VUE+Element,ant都有封装好的UI,直接引用就好了: 这里,觉得样式不符合UI设计,所以自定义封装了一个步骤条 ...
jq步骤条 java_JQuery实现步骤条效果(上一步,下一步)
之前做出的步骤条是利用easyui +jquery实现的,但是他在隐藏板块的时候用到的是display:none,这会使我在板块中加载的js失效,所以换了一种方式,用Position.把元素脱离文档流 ...
前端学习（2693）：重读vue电商网站14之步骤条的使用与美化
以下就是步骤条使用的核心代码,其中 active 绑定的是每一个 step 的下标,默认从 0 开始.其次,我们可以设置 aligin-center 属性来让我们的步骤条进行居中.el-step就是每 ...

element步骤条实战

element步骤条实战相关推荐

最新文章

热门文章