038_Steps步骤条

1. Steps步骤条

1.1. Steps步骤条引导用户按照流程完成任务的分步导航条, 可根据实际应用场景设定步骤, 步骤不得少于2步。

1.2. Steps Attributes

参数	说明	类型	可选值	默认值
space	每个step的间距, 不填写将自适应间距。支持百分比。	number / string	无	无
direction	显示方向	string	vertical/horizontal	horizontal
active	设置当前激活步骤	number	无	0
process-status	设置当前步骤的状态	string	wait / process / finish / error / success	process
finish-status	设置结束步骤的状态	string	wait / process / finish / error / success	finish
align-center	进行居中对齐	boolean	无	false
simple	是否应用简洁风格	boolean	无	false

1.3. Step Attributes

参数	说明	类型	可选值
title	标题	string	无
description	描述性文字	string	无
icon	图标	传入icon的class全名来自定义icon, 也支持slot方式写入	string
status	设置当前步骤的状态, 不设置则根据steps确定状态	wait / process / finish / error / success	无

1.4. Step Slot

Name	说明
icon	自定义图标
title	自定义标题
description	自定义描述性文字

2. Steps步骤条例子

2.1. 使用脚手架新建一个名为element-ui-steps的前端项目, 同时安装Element插件。

2.2. 编辑index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Steps from '../components/Steps.vue'
import TitleSteps from '../components/TitleSteps.vue'
import DescriptionSteps from '../components/DescriptionSteps.vue'
import IconSteps from '../components/IconSteps.vue'
import VerticalSteps from '../components/VerticalSteps.vue'
import SimpleSteps from '../components/SimpleSteps.vue'Vue.use(VueRouter)const routes = [{ path: '/', redirect: '/Steps' },{ path: '/Steps', component: Steps },{ path: '/TitleSteps', component: TitleSteps },{ path: '/DescriptionSteps', component: DescriptionSteps },{ path: '/IconSteps', component: IconSteps },{ path: '/VerticalSteps', component: VerticalSteps },{ path: '/SimpleSteps', component: SimpleSteps }
]const router = new VueRouter({routes
})export default router

2.3. 在components下创建Steps.vue

<template><div><h1>基础用法</h1><h4>设置active属性, 接受一个Number, 表明步骤的index, 从0开始。需要定宽的步骤条时, 设置space属性即可, 它接受Number, 单位为px, 如果不设置, 则为自适应。设置finish-status属性可以改变已经完成的步骤的状态。</h4><el-steps :active="active" finish-status="success"><el-step title="步骤 1"></el-step><el-step title="步骤 2"></el-step><el-step title="步骤 3"></el-step></el-steps><el-button style="margin-top: 12px;" @click="next">下一步</el-button></div>
</template><script>
export default {data () {return {active: 0}},methods: {next () {if (this.active++ > 2) this.active = 0}}
}
</script>

2.4. 在components下创建TitleSteps.vue

<template><div><h1>含状态步骤条</h1><h4>也可以使用title具名分发, 可以用slot的方式来取代属性的设置, 在本文档最后的列表中有所有的slot name可供参考。</h4><el-steps :space="200" :active="1" finish-status="success"><el-step title="已完成"></el-step><el-step title="进行中"></el-step><el-step title="步骤 3"></el-step></el-steps></div>
</template>

2.5. 在components下创建DescriptionSteps.vue

<template><div><h1>有描述的步骤条</h1><h4>description设置每个步骤有其对应的步骤状态描述。</h4><el-steps :active="1"><el-step title="步骤 1" description="这是一段很长很长很长的描述性文字"></el-step><el-step title="步骤 2" description="这是一段很长很长很长的描述性文字"></el-step><el-step title="步骤 3" description="这段就没那么长了"></el-step></el-steps><h1>居中的步骤条</h1><h4>align-center进行居中对齐, 标题和描述都将居中。</h4><el-steps :active="2" align-center><el-step title="步骤1" description="这是一段很长很长很长的描述性文字"></el-step><el-step title="步骤2" description="这是一段很长很长很长的描述性文字"></el-step><el-step title="步骤3" description="这是一段很长很长很长的描述性文字"></el-step><el-step title="步骤4" description="这是一段很长很长很长的描述性文字"></el-step></el-steps></div>
</template>

2.6. 在components下创建IconSteps.vue

<template><div><h1>带图标的步骤条</h1><h4>通过icon属性来设置图标, 图标的类型可以参考Icon组件的文档, 除此以外, 还能通过具名slot来使用自定义的图标。</h4><el-steps :active="1"><el-step title="步骤 1" icon="el-icon-edit"></el-step><el-step title="步骤 2" icon="el-icon-upload"></el-step><el-step title="步骤 3" icon="el-icon-picture"></el-step></el-steps></div>
</template>

2.7. 在components下创建VerticalSteps.vue

<template><div><h1>竖式步骤条</h1><h4>只需要在el-steps元素中设置direction属性为vertical即可。</h4><div style="height: 300px;"><el-steps direction="vertical" :active="1"><el-step title="步骤 1"></el-step><el-step title="步骤 2"></el-step><el-step title="步骤 3" description="这是一段很长很长很长的描述性文字"></el-step></el-steps></div></div>
</template>

2.8. 在components下创建SimpleSteps.vue

<template><div><h1>简洁风格的步骤条</h1><h4>设置simple可应用简洁风格, 该条件下align-center / description / direction / space都将失效。</h4><el-steps :active="1" simple><el-step title="步骤 1" icon="el-icon-edit"></el-step><el-step title="步骤 2" icon="el-icon-upload"></el-step><el-step title="步骤 3" icon="el-icon-picture"></el-step></el-steps><el-steps :active="1" finish-status="success" simple style="margin-top: 20px"><el-step title="步骤 1" ></el-step><el-step title="步骤 2" ></el-step><el-step title="步骤 3" ></el-step></el-steps></div>
</template>

2.9. 运行项目, 访问http://localhost:8080/#/Steps

2.10. 运行项目, 访问http://localhost:8080/#/TitleSteps

2.11. 运行项目, 访问http://localhost:8080/#/DescriptionSteps

2.12. 运行项目, 访问http://localhost:8080/#/IconSteps

2.13. 运行项目, 访问http://localhost:8080/#/VerticalSteps

2.14. 运行项目, 访问http://localhost:8080/#/SimpleSteps

038_Steps步骤条相关推荐

jq步骤条 java_JQuery实现步骤条效果(上一步,下一步)
之前做出的步骤条是利用easyui +jquery实现的,但是他在隐藏板块的时候用到的是display:none,这会使我在板块中加载的js失效,所以换了一种方式,用Position.把元素脱离文档流 ...
ElementUI自定义icon步骤条
在使用ElementsUI中的步骤条时,有时会遇到自定义icon的情况.但element icon数量不多,可能找不到需要的. 这时我们可以自定义icon,同样通过类来引用.首先我们先下载好需要的ic ...
前端学习（2693）：重读vue电商网站14之步骤条的使用与美化
以下就是步骤条使用的核心代码,其中 active 绑定的是每一个 step 的下标,默认从 0 开始.其次,我们可以设置 aligin-center 属性来让我们的步骤条进行居中.el-step就是每 ...
前端学习（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 ...
web元件库、axure元件库、通用元件库、常用web组件、常用表单、框架、数据表单、导航栏、边框、图标、列表、日期时间选择器、评分组件、穿梭框、输入框、步骤条、图表组件、数据可视化、后台模板、时间轴
web元件库.axure元件库.通用元件库.常用web组件.常用表单.框架.数据表单.导航栏.边框.图标.列表.日期时间选择器.评分组件.穿梭框.输入框.步骤条.图表组件.数据可视化.后台模板.时间轴 ...
web元件库/常用web组件/常用表单/导航栏/边框/图标/日期时间选择器/评分组件/穿梭框/输入框/步骤条/计数器/输入框/Axure原型/axure元件库/rp原型/交互控件/五星评分器/导航框架
web元件库/axure元件库/常用web组件/常用表单/导航栏/边框/图标/日期时间选择器/评分组件/穿梭框/输入框/步骤条 /交互控件:单/多选框.输入框.计数器.选择器.级联选择.滑动开关.滑块 ...
web元件库/axure元件库/常用web组件/常用表单/导航栏/边框/图标/日期时间选择器/评分组件/穿梭框/输入框/步骤条/
web元件库/axure元件库/常用web组件/常用表单/导航栏/边框/图标/日期时间选择器/评分组件/穿梭框/输入框/步骤条/ Axure原型演示及下载地址请点击:https://www.pmdan ...
步骤条与Tab栏的联动 ~ 不要错过
步骤条与 Tab栏的联动 <!-- :active="activeIndex" 指定激活项的索引 (activeIndex 用于操 ...

038_Steps步骤条

038_Steps步骤条相关推荐

最新文章

热门文章