改变elementui卡片crad样式_elementUI步骤条样式改造

image.png

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

结构部分

:class="milepostActive== key+1 ? stepActive: '' "

:title="value.title"

:description="value.description">

数据定义部分(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'

}

},

样式部分

.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;

}

}

}