【element-ui】 steps自定义进度图标及完成等状态图标

BianHua2099

已于 2022-05-27 18:23:18 修改

阅读量1.3w

点赞数 3

文章标签： ui css vue.js elementui

于 2022-05-27 18:18:10 首次发布

本文链接：https://blog.csdn.net/fhd6sf/article/details/125008341

版权

前言

因效果需要需自定义steps图标，找了很多回答，通过摸索结合尝试，终于搞懂如何替换图标

正文

1.更换默认状态图标（不包括success和error状态）

1.1 直接添加icon属性即可(最方便)

<el-step title="竣工" class="tip five" icon="icon-jdico5"></el-steps>

注意：此处需导入icon图标
还需重写样式
我这里改了图标大小，所以对应改了top属性

.tip ::v-deep.el-step__icon.is-icon {
    border-radius: 50%;
    border: 2px solid;
    border-color: inherit;
    width: 36px;
    height: 36px;
}
::v-deep.el-step.is-horizontal .el-step__line {
    top: 17px;
}

效果如下：
在这里插入图片描述

1.2 使用插槽slot

<el-step title="预约">
	<i class="order stepIcon" slot="icon"></i>
</el-step>

此方法不如方法一方便不再展开描述

2.更换success状态图标

有些时候我们需要自定义success状态，同步实现变色
element默认为对勾

.five ::v-deep.el-icon-success:before {
    content: '\e904';/* 注意，这里需更换为所需成功状态显示icon编码 */
}
/* 注意，以下代码需替换为自己生成icon样式！！！ */
.tip ::v-deep.is-status {
    font-family: 'icomoon' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-size: 20px;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

这里是以方法1.1为示例，需要将状态改为success

<el-step title="竣工" class="tip five" icon="icon-jdico5" status="success"></el-steps>

3.更换error状态图标（同理）

只需将类名和状态改为error即可

.five ::v-deep.el-icon-error:before {
    content: '\e904';/* 注意，这里需更换为所需成功状态显示icon编码 */
}
/* 注意，以下代码需替换为自己生成icon样式！！！ */
.tip ::v-deep.is-status {
    font-family: 'icomoon' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-size: 20px;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

这里是以方法1.1为示例，需要将状态改为error

<el-step title="竣工" class="tip five" icon="icon-jdico5" status="error"></el-steps>

4.遇到的小问题

在这里插入图片描述
这条横线在success和error状态下可能会出现中间有空白情况
问题原因：
官方是用了添加边框颜色实现
解决方法：
添加背景颜色即可

.tip ::v-deep.is-success > .el-step__line > i {
    background-color: #67c23a;
}
.tip ::v-deep.is-error > .el-step__line > i {
    background-color: #f56c6c;
}