Vue實(shí)現(xiàn)步驟條效果
更新時(shí)間：2022年03月03日 10:40:17 作者：theMuseCatcher
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)步驟條效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Vue實(shí)現(xiàn)步驟條效果的具體代碼，供大家參考，具體內(nèi)容如下
步驟總數(shù)和初始選擇步驟 均可自定義設(shè)置，每個(gè)步驟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: { // 當(dāng)前選中的步驟
? ? ? type: Number,
? ? ? default: 1
? ? }
? },
? data () {
? ? return {
? ? ? // 若當(dāng)前選中步驟超過總步驟數(shù)，則默認(rèn)選擇步驟1
? ? ? current: this.currentStep > this.totalSteps ? 1 : this.currentStep
? ? }
? },
? methods: {
? ? onChange (index) { // 點(diǎn)擊切換選擇步驟
? ? ? 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; // 彈性盒模型對(duì)象的子元素都有相同的長度，且忽略它們內(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)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue3深入學(xué)習(xí)?nextTick和historyApiFallback
這篇文章主要介紹了vue3深入學(xué)習(xí)?nextTick和historyApiFallback，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的朋友可以參考一下2022-08-08
這篇文章主要介紹了vue 通過綁定事件獲取當(dāng)前行的id操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue?UI創(chuàng)建項(xiàng)目詳細(xì)步驟
本文主要介紹了Vue?UI創(chuàng)建項(xiàng)目詳細(xì)步驟，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
實(shí)例分析vue循環(huán)列表動(dòng)態(tài)數(shù)據(jù)的處理方法
本篇文章給大家詳細(xì)分享了關(guān)于vue循環(huán)列表動(dòng)態(tài)數(shù)據(jù)的處理方法以及相關(guān)知識(shí)點(diǎn)內(nèi)容，有需要的朋友們參考下。2018-09-09
這篇文章主要介紹了Vue數(shù)據(jù)劫持詳情介紹，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，感興趣的小伙伴可以參考一下，希望對(duì)你的學(xué)習(xí)有所幫助2022-08-08
這篇文章主要介紹了Vue加載json文件的方法,結(jié)合實(shí)例形式分析了vue.js針對(duì)json文件的加載及數(shù)據(jù)讀取等相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
Vue實(shí)現(xiàn)Header漸隱漸現(xiàn)效果的實(shí)例代碼
這篇文章主要介紹了Vue實(shí)現(xiàn)Header漸隱漸現(xiàn)效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-11-11
Vue父組件觸發(fā)子組件中的實(shí)現(xiàn)方法
文章總結(jié)：介紹了兩種實(shí)現(xiàn)父組件觸發(fā)子組件方法的常用方法：通過ref訪問子組件實(shí)例并調(diào)用方法,以及使用自定義事件觸發(fā)子組件方法2025-01-01
Vue3使用ref與reactive創(chuàng)建響應(yīng)式對(duì)象的示例代碼
這篇文章主要詳細(xì)介紹了Vue3使用ref與reactive創(chuàng)建響應(yīng)式對(duì)象的方法步驟,文中通過代碼示例和圖文結(jié)合的方式給大家介紹的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下2024-02-02
vue2.0開發(fā)實(shí)踐總結(jié)之入門篇
這篇文章主要為大家總結(jié)了vue2.0開發(fā)實(shí)踐之入門,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12