Vue實現(xiàn)步驟條效果

更新時間：2022年03月03日 10:40:17 作者：theMuseCatcher

這篇文章主要為大家詳細介紹了Vue實現(xiàn)步驟條效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Vue實現(xiàn)步驟條效果的具體代碼，供大家參考，具體內(nèi)容如下

步驟總數(shù)和初始選擇步驟均可自定義設(shè)置，每個步驟title和description也均可自定義設(shè)置傳入

效果圖如下：

①創(chuàng)建步驟條組件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數(shù)組
? ? ? type: Array,
? ? ? default: () => {
? ? ? ? return []
? ? ? }
? ? },
? ? stepsDesc: { // 步驟description數(shù)組
? ? ? type: Array,
? ? ? default: () => {
? ? ? ? return []
? ? ? }
? ? },
? ? totalSteps: { // 總的步驟數(shù)
? ? ? type: Number,
? ? ? default: 3
? ? },
? ? currentStep: { // 當前選中的步驟
? ? ? type: Number,
? ? ? default: 1
? ? }
? },
? data () {
? ? return {
? ? ? // 若當前選中步驟超過總步驟數(shù)，則默認選擇步驟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; // 彈性盒模型對象的子元素都有相同的長度，且忽略它們內(nèi)部的內(nèi)容
? ? ? 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組件，并傳入相關(guān)初始數(shù)據(jù)：

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: