由于项目中有用到步骤条,在这个过程中,也遇到了坑,可能还是自己能力不足。。。纠结好久
<el-steps :space="200" :active="1" finish-status="success" align-center>
<el-step title="已完成"></el-step>
<el-step title="进行中"></el-step>
<el-step title="步骤 3"></el-step>
</el-steps>
element-ui中步骤条的基本使用方法如上图所示,更加具体的可以去element-ui的官网查看。由于页面要兼容不同屏幕宽度,所以在项目中设置了space的值为20%,居中样式看着可能更好一点。但是它也存在一个问题,是不支持英文字母自动换行的,所以得自己手动设置word-break: break-all
现在来说一下项目中的要求:
除了title和description的展示,下面还增加了时间和原因的展示.....
因为这个组件只有title和description两个属性,所以下面时间的展示和原因就有点困难了,还得对应到当前的步骤。我的解决办法就是去找步骤的源码,仿照源码又写了一个组件,其中一部分都是本来组件都有的直接拿来用了
<template>
<div class="el-step is-horizontal is-center" :style="style">
<slot></slot>
</div>
</template>
<script>
export default {
name: "SubSteps",
data() {
return {};
},
computed: {
space() {
const { isSimple, $parent: { space } } = this;
return isSimple ? "" : space;
},
style: function() {
const style = {};
const parent = this.$parent;
const len = parent.steps.length;
const space =
typeof this.space === "number"
? this.space + "px"
: this.space
? this.space
: 100 / (len - (this.isCenter ? 0 : 1)) + "%";
style.flexBasis = space;
if (this.isVertical) return style;
if (this.isLast) {
style.maxWidth = 100 / this.stepsCount + "%";
} else {
style.marginRight = -this.$parent.stepOffset + "px";
}
return style;
}
}
};
</script>
<style scoped>
.box-container-body {
padding: 24px;
background: #fff;
}
.is-center {
text-align: center;
font-size: 12px;
white-space: normal;
}
</style>
使用方法如下:
<el-steps v-model="info.auditingDetail" space="20%" :active="idx" align-center>
<sub-steps v-for="(item,index) in info.auditingDetail"
:key="index"
class="detail">{{item.auditingTime}}
</sub-steps>
</el-steps>
---------------------
作者:栗子萌萌哒
来源:CSDN
原文:https://blog.csdn.net/nannanmengmengda/article/details/83622510
版权声明:本文为博主原创文章,转载请附上博文链接!