改造el-steps的样式
2021-06-08 本文已影响0人
漫漫江雪
el-steps的默认样式和给的UI图有差别，自己封装又费时，又达不到好用的高度，那就改样式吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>改造el-steps样式</title>
<link rel="stylesheet" href="Scripts/element-ui/index.css" />
<style>
.cus-steps .el-step .el-step__main {
position: absolute;
left: 24px;
top: 2px;
height: 26px;
line-height: 26px;
background-color: #fff;
padding: 0 10px 0 16px;
}
.cus-steps .el-step .el-step__title {
line-height: 26px;
}
.cus-steps .el-step__title.is-process {
font-weight: 500;
}
.cus-steps .el-step:last-of-type.is-flex {
flex-basis: 120px!important;
}
.cus-steps .el-step__head {
width: 96%;
}
.cus-steps .el-step__icon.is-text {
width: 32px;
height: 32px;
}
.cus-steps .el-step.is-horizontal .el-step__line {
top: 16px;
}
.cus-steps .el-step__head.is-process {
border-color: #369afe;
}
.cus-steps .el-step__head.is-process .el-step__icon.is-text {
color: #fff;
background-color: #369afe;
}
</style>
</head>
<body>
<div id="app">
<el-steps :active="curStep" finish-status="success" class="cus-steps" style="margin-top: 20px">
<el-step :title="step.title" v-for="(step, index) in steps" :key="index"></el-step>
</el-steps>
<el-button type="primary" size="small" @click="next()">下一步</el-button>
</div>
<script src="Scripts/vue.min.js"></script>
<!-- 引入组件库 -->
<script src="Scripts/element-ui/index.js"></script>
<script>
new Vue({
el: "#app",
data:{
steps: [
{title: '步骤1', description: '' },
{title: '步骤2', description: '' },
{title: '步骤3', description: '' }
],
curStep: 0
},
methods: {
next() {
this.curStep = this.curStep > 2 ? 0 : this.curStep + 1
}
}
})
</script>
</body>
</html>
image.png
