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) } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)