Vue实现步骤条效果
更新时间：2022年03月03日 10:40:17 作者：theMuseCatcher
这篇文章主要为大家详细介绍了Vue实现步骤条效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Vue实现步骤条效果的具体代码，供大家参考，具体内容如下
步骤总数和初始选择步骤 均可自定义设置，每个步骤title和description也均可自定义设置传入
效果图如下：
①创建步骤条组件Steps.vue：
<template>
<div class="m-steps-area">
<div class="m-steps">
<div
:class="['m-steps-item',
{ 'finished': current > n,
'process': current === n && n !== totalSteps,
'last-process': current === totalSteps && n === totalSteps,
'middle-wait': current < n && n !== totalSteps,
'last-wait': current < n && n === totalSteps,
}
]"
v-for="n in totalSteps"
:key="n"
@click="onChange(n)">
<div class="m-steps-icon">
<span class="u-icon" v-if="current<=n">{{ n }}</span>
<span class="u-icon" v-else>✓</span>
</div>
<div class="m-steps-content">
<div class="u-steps-title">{{ stepsLabel[n-1] || 'S ' + n }}</div>
<div class="u-steps-description">{{ stepsDesc[n-1] || 'Desc ' + n }}</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Steps',
props: {
stepsLabel: { // 步骤title数组
type: Array,
default: () => {
return []
}
},
stepsDesc: { // 步骤description数组
type: Array,
default: () => {
return []
}
},
totalSteps: { // 总的步骤数
type: Number,
default: 3
},
currentStep: { // 当前选中的步骤
type: Number,
default: 1
}
},
data () {
return {
// 若当前选中步骤超过总步骤数，则默认选择步骤1
current: this.currentStep > this.totalSteps ? 1 : this.currentStep
}
},
methods: {
onChange (index) { // 点击切换选择步骤
console.log('index:', index)
if (this.current !== index) {
this.current = index
this.$emit('change', index)
}
}
}
}
</script>
<style lang="less" scoped>
.m-steps-area {
width: 1100px;
margin: 0px auto;
.m-steps {
padding: 30px 0;
display: flex;
.m-steps-item {
display: inline-block;
flex: 1; // 弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容
overflow: hidden;
font-size: 16px;
line-height: 32px;
.m-steps-icon {
display: inline-block;
margin-right: 8px;
width: 32px;
height: 32px;
border-radius: 50%;
text-align: center;
}
.m-steps-content {
display: inline-block;
vertical-align: top;
padding-right: 16px;
.u-steps-title {
position: relative;
display: inline-block;
padding-right: 16px;
}
.u-steps-description {
font-size: 14px;
max-width: 140px;
}
}
}
.finished {
margin-right: 16px;
cursor: pointer;
&:hover {
.m-steps-content {
.u-steps-title {
color: #1890ff;
}
.u-steps-description {
color: #1890ff;
}
}
}
.m-steps-icon {
background: #fff;
border: 1px solid rgba(0,0,0,.25);
border-color: #1890ff;
.u-icon {
color: #1890ff;
}
}
.m-steps-content {
color: rgba(0,0,0,.65);
.u-steps-title {
color: rgba(0,0,0,.65);
&:after {
background: #1890ff;
position: absolute;
top: 16px;
left: 100%;
display: block;
width: 9999px;
height: 1px;
content: "";
}
}
.u-steps-description {
color: rgba(0,0,0,.45);
}
}
}
.process {
margin-right: 16px;
.m-steps-icon {
background: #1890ff;
border: 1px solid rgba(0,0,0,.25);
border-color: #1890ff;
.u-icon {
color: #fff;
}
}
.m-steps-content {
color: rgba(0,0,0,.65);
.u-steps-title {
font-weight: 600;
color: rgba(0,0,0,.85);
&:after {
background: #e8e8e8;
position: absolute;
top: 16px;
left: 100%;
display: block;
width: 9999px;
height: 1px;
content: "";
}
}
.u-steps-description {
color: rgba(0,0,0,.65);
}
}
}
.last-process {
margin-right: 0;
.m-steps-icon {
background: #1890ff;
border: 1px solid rgba(0,0,0,.25);
border-color: #1890ff;
.u-icon {
color: #fff;
}
}
.m-steps-content {
color: rgba(0,0,0,.65);
.u-steps-title {
font-weight: 600;
color: rgba(0,0,0,.85);
}
.u-steps-description {
color: rgba(0,0,0,.65);
}
}
}
.middle-wait {
margin-right: 16px;
cursor: pointer;
&:hover {
.m-steps-icon {
border: 1px solid #1890ff;
.u-icon {
color: #1890ff;
}
}
.m-steps-content {
.u-steps-title {
color: #1890ff;
}
.u-steps-description {
color: #1890ff;
}
}
}
.m-steps-icon {
background: #fff;
border: 1px solid rgba(0,0,0,.25);
.u-icon {
color: rgba(0,0,0,.25);
}
}
.m-steps-content {
color: rgba(0,0,0,.65);
.u-steps-title {
color: rgba(0,0,0,.45);
&:after {
background: #e8e8e8;
position: absolute;
top: 16px;
left: 100%;
display: block;
width: 9999px;
height: 1px;
content: "";
}
}
.u-steps-description {
color: rgba(0,0,0,.45);
}
}
}
.last-wait {
margin-right: 0;
cursor: pointer;
&:hover {
.m-steps-icon {
border: 1px solid #1890ff;
.u-icon {
color: #1890ff;
}
}
.m-steps-content {
.u-steps-title {
color: #1890ff;
}
.u-steps-description {
color: #1890ff;
}
}
}
.m-steps-icon {
background: #fff;
border: 1px solid rgba(0,0,0,.25);
.u-icon {
color: rgba(0,0,0,.25);
}
}
.m-steps-content {
color: rgba(0,0,0,.65);
.u-steps-title {
color: rgba(0,0,0,.45);
}
.u-steps-description {
color: rgba(0,0,0,.45);
}
}
}
}
}
</style>②在要使用的页面引入Steps组件，并传入相关初始数据：
<Steps :currentStep="1" :totalSteps="3" :stepsLabel="stepsLabel" :stepsDesc="stepsDesc" @change="onChange" />
import Steps from '@/components/Steps'
components: {
Steps
},
data () {
return {
stepsLabel: ['Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5'],
stepsDesc: ['description 1', 'description 2', 'description 3', 'description 4', 'description 5']
}
}
methods: {
onChange (index) { // 父组件获取切换后的选中步骤
console.log('parentIndex:', index)
}
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
Computed 计算属性是 Vue 中常用的一个功能，本篇文章主要介绍了Vue Computed 计算属性原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
这篇文章主要介绍了vue3.0中使用postcss-pxtorem的具体方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
Avue是一个基于Vue.js的前端框架,它是由阿里云开发的一款企业级UI组件库,旨在提供一套全面、易用且高性能的界面解决方案本文介绍了Avue实现动态查询与数据展示的示例,需要的朋友可以参考下2024-08-08
pdf文件预览是开发业务时常见的一个交互,在toB项目中是经常用到的,对于用户上传文件,预览文件等操作时有一个更好的体验,下面我结合实际业务,在vue的基础上与大家分享这个实现方法,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了VUE项目axios请求头更改Content-Type操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
本文主要介绍了vue前后端端口不一致的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-10-10
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
这篇文章主要介绍了vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题,文中单独给大家介绍了vue router路由懒加载问题，需要的朋友可以参考下2018-04-04
这篇文章主要为大家详细介绍了Vue3如何结合Vant实现简单的登录功能,文中的示例代码讲解详细,有需要的小伙伴可以跟随小编一起学习一下2024-04-04
这篇文章主要介绍了vue-cli中实现响应式布局的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
这篇文章主要介绍了解决vue 退出动画无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
最新评论