VUE中自定义步骤条

最新推荐文章于 2025-05-28 09:50:38 发布

Accccce

最新推荐文章于 2025-05-28 09:50:38 发布

阅读量4.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签：前端 vue

本文链接：https://blog.youkuaiyun.com/Accccce/article/details/123661523

Vue 专栏收录该内容

2 篇文章

订阅专栏

本文记录了在VUE项目中根据elementUI的el-step样式自定义步骤条的过程，详细介绍了如何改编样式并应用于APP.vue中，最终展示的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

VUE中自定义步骤条

下列自定义步骤条是根据elementUI中的el-step的样式改编而得。记录下自己改编过程！！！

<template>
	<div class='steps el-steps el-steps--horizontal'>
		<div class='el-step is-horizontal'
		:class='{isFlex:item.index == stepList.length}'
		style='flex-basis:50%;margin-right:0'
		:style="{
			'flexBasis':(item.index==stepList.length?0:50)+'%',
			'maxWidth':(item.index==stepList.length?(1/stepList.length)*100:100)+'%'
			}"
		v-for="(item,index) in stepList"
		:key='index'
		>
		<div class='el-step__head is-process'>
			<div class='el-step__line'>
				<i class='el-step__line-inner' style='transition-delay:0ms;border-width:0;width:0%'></i>
			</div>
		</div>
		<div class='textCla'>
			<div  class='el-step__icon is-text' :class="{success:index<active,before:index>active, active:index==active}" @click="clickStep(index,stepFunction)">
				<div class='el-step__icon-inner'><span v-if='index>=active'>{{item.index}}</span><i v-if='index<active' class='el-icon-check'> </i></div>
			</div>
			<div style='background:#fff;z-index:1;line-height:36px;padding:0 5px' :class="{successText:index<active}">{{item.name}}</div>
		</div>
		<p class='pTitle'>{{item.title}}</p>
		</div>
	</div>
</template>
<script>
	export default{
		methods:{
			//点击步骤条后回调
			clickStep(index,callback){
				if(callback) callback(index)
			}
		},
		props:{
			active:{ type : Number,default:1},
			stepFunction:{type:Function,default:()=>{}},
			stepList:{type:Array, default:()=>[] }
		}
	}
</script>
<style lang='less' scoped>
.textCla{
	display:flex;
    align-items: center;
}
.steps{
	[class^=el-icon-]{
		margin-left:0;
		font-weight:700;
		color:#4361ec;
	}
}
.el-step__icon.is-text{
	height:36px;
	width:36px;
}
.el-step:last-of-type.isFlex{
	flex-basis:auto !important;
	flex-shrink:0;
	flex-grow:0;
}
.el-step.is-horizontal .el-step__line{
	top:18px;
}
.success{
	background-color:#dae0fb !important;
	color:#fff;
}
.successText{
	color:#000;
}
.active{
	background-color:#4361ec !important;
	color:#fff;
}
.before{
	background-color:#f3f3f5;
	border-color:#f3f3f5 !important;
	span{
		color:#9b9b9b;
	}
}
.pTitle{
	z-index:1;
	width:84px;
	margin-left:36px;
    margin-top:0;
	white-space:pre-wrap;
	color:#9b9b9b;
	font-size:12px;
}
</style>

上诉自定义模板的样式根据自己的需求修改，然后在页面中使用该模板就可以了
下面直接在APP.vue中调用模板

<template>
  <div id="app">
    <div >
      <Echartsword ></Echartsword>
    </div>
    <ElStep :stepFunction="stepFunction" :active="active" :stepList="stepList"></ElStep>
    <el-button @click="submit">提交</el-button>
  </div>
</template>
<script>
import ElStep from './components/elStep.vue'
export default {
  name: 'App',
  data(){
    return {
      val:'',
      active:0,
      stepList:[
        {name:'aaa',index:1,title:'aaa的title信息'},
        {name:'bbb',index:2,title:'bbb的title信息'},
        {name:'ccc',index:3,title:'ccc的title信息'},
      ]

    }
  },
  components: {
    HelloWorld,
    Hello,
    Echartsword,
    ElStep
  },methods:{
    inputVal(val){
      this.val = val
    },
    submit(){
      console.log(this.val)
    },stepFunction(index){
      this.active = index
      this.goStep(this.active)
    },goStep(){

    }
  }
}
</script>

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