脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue步骤条效果

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)
    }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • VUE简单的定时器实时刷新的实现方法

    VUE简单的定时器实时刷新的实现方法

    这篇文章主要介绍了VUE简单的定时器实时刷新的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-01-01
  • Vue3 的ref和reactive的用法和区别示例解析

    Vue3 的ref和reactive的用法和区别示例解析

    ref和reactive是Vue3中用来实现数据响应式的API,一般情况下,ref定义基本数据类型,reactive定义引用数据类型,本文给大家介绍Vue3 的ref和reactive的用法和区别,感兴趣的朋友一起看看吧
    2023-10-10
  • Element+Vue实现动态表单多个下拉框组件功能

    Element+Vue实现动态表单多个下拉框组件功能

    这篇文章主要介绍了Element+Vue实现动态表单多个下拉框组件功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • Vue.js快速入门实例教程

    Vue.js快速入门实例教程

    vue是法语中视图的意思，Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。这篇文章主要介绍了Vue.js快速入门实例教程的相关资料,需要的朋友可以参考下
    2016-10-10
  • Vue2 Element Schema Form 配置式生成表单的实现

    Vue2 Element Schema Form 配置式生成表单的实现

    本文主要介绍了Vue2 Element Schema Form 配置式生成表单的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05
  • Vue 2阅读理解之initRender与callHook组件详解

    Vue 2阅读理解之initRender与callHook组件详解

    这篇文章主要为大家介绍了Vue 2阅读理解之initRender与callHook组件详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-08-08
  • Vue的基本知识你都了解吗

    Vue的基本知识你都了解吗

    这篇文章主要为大家详细介绍了Vue的基本知识，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2022-02-02
  • vue使用codemirror的两种用法

    vue使用codemirror的两种用法

    这篇文章主要介绍了在vue里使用codemirror的两种用法,每种方法通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-08-08
  • vue设置路由title,但刷新页面时title失效的解决

    vue设置路由title,但刷新页面时title失效的解决

    这篇文章主要介绍了vue设置路由title，但刷新页面时title失效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-06-06
  • vue轻松实现水印效果

    vue轻松实现水印效果

    这篇文章主要为大家详细介绍了vue轻松实现水印效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09

最新评论