elementUI步骤条样式改造

修改的效果图如上。下面详细介绍修改的步骤。（通过动态添加类名的方式改进样式）

结构部分

<el-steps :active="milepostActive" ><el-step v-for="(value, key) in milepost":class="milepostActive== key+1 ? stepActive: '' ":title="value.title":description="value.description"></el-step>
</el-steps>

数据定义部分（data）

data () {return {// 数组对象milepost: [{title: '项目策划', description: '2019.1.1'},{title: '立项', description: '2019.3.1'},{title: '需求', description: '2019.5.1'},{title: '开发', description: '2019.7.1'},{title: '测试', description: '2019.9.1'},{title: '发布', description: '2019.11.1'},{title: '结项', description: '2019.12.31'},],// 默认步骤数milepostActive: 5,// 动态添加类名stepActive: 'stepActive'}
},

样式部分

<style lang="scss">.el-step.is-horizontal.stepActive{.el-step__head.is-finish{.el-step__line{// 当前步骤数横线样式设置.el-step__line-inner{width: 50% !important;border-width: 1px !important;}}// 当前步骤数圆圈样式设置.el-step__icon.is-text{background: #409eff;color:#fff;}}}
</style>

elementUI步骤条样式改造相关推荐

vue、Steps 步骤条、Steps 属性、vue Steps 所有步骤条样式、vue Steps 步骤条全部属性
vue.Steps 步骤条.Steps 属性.vue Steps 所有步骤条样式.vue Steps 步骤条全部属性设计规则何时使用代码演示 1.基本用法 2.迷你版 3.带图标的步骤条 4.步 ...
vue+elementui 步骤条有一处空白
1 问题描述项目当中使用到了elementui里的step组件,但是在用上之后发现一个问题在步骤条中间有一块空白 2 解决办法百思不得其解
卡片式步骤条样式实现
效果图实现  <div class="flex-box" v-if="showStep"><div :c ...
Element-ui 步骤条功能拓展——动态生成步骤条
需求:最近在做应急预案的vue页面,需要有上一步.下一步等功能,并且每一个预案都是一个简单流程题外话:感觉使用vue+Element-ui来做,真的是方便很多很多,思路清晰,代码简洁. 如果是按照以 ...
步骤条的实现原理及AliceUI中步骤条Step的应用
导读本文主要介绍了步骤条的实现原理以及Alice UI 的步骤条step的使用方法. 基本原理首先看看从网上找的步骤条: 三种状态: 已经完成的状态(done) 当前正在进行的状态(current ...
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 ...
VUE中自定义步骤条
VUE中自定义步骤条下列自定义步骤条是根据elementUI中的el-step的样式改编而得.记录下自己改编过程!!! <template><div class='steps el ...

elementUI步骤条样式改造

结构部分

数据定义部分（data）

样式部分

elementUI步骤条样式改造相关推荐

最新文章

热门文章