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)前選中步驟超過(guò)總步驟數(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ì)象的子元素都有相同的長(zhǎng)度，且忽略它們內(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>②在要使用的頁(yè)面引入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)
? ? }
}以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vueCli?4.x升級(jí)5.x報(bào)錯(cuò):Progress?Plugin?Invalid?Options的解決方法
本文主要介紹了vueCli?4.x升級(jí)5.x報(bào)錯(cuò):Progress?Plugin?Invalid?Options的解決方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-01-01
vue2.0 實(shí)現(xiàn)導(dǎo)航守衛(wèi)的具體用法（路由守衛(wèi)）
這篇文章主要介紹了vue2.0 實(shí)現(xiàn)導(dǎo)航守衛(wèi)的具體用法（路由守衛(wèi)），vue-route 提供的 beforeRouteUpdate 可以方便地實(shí)現(xiàn)導(dǎo)航守衛(wèi)（navigation-guards），具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-05-05
TinyMCE 是一款功能強(qiáng)大的富文本編輯器,廣泛應(yīng)用于各種 Web 應(yīng)用中,本文將詳細(xì)介紹如何在 Vue 項(xiàng)目中集成 TinyMCE,通過(guò)詳盡的步驟說(shuō)明、示例代碼展示以及豐富的配置選項(xiàng),助力開(kāi)發(fā)者輕松實(shí)現(xiàn)內(nèi)容編輯的增強(qiáng)與美化,需要的朋友可以參考下2024-11-11
Vuex是一個(gè)專為Vue.js應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式,它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化,下面這篇文章主要給大家介紹了關(guān)于vuex模塊獲取數(shù)據(jù)及方法的相關(guān)資料,需要的朋友可以參考下2023-03-03
筆者這篇文章會(huì)從vue3基礎(chǔ)的知識(shí)點(diǎn)開(kāi)始剖析，特別是在將composition?API的時(shí)候，在代碼示例中不會(huì)一上來(lái)就使用setup語(yǔ)法糖，而是用早期的setup函數(shù)，這樣方便于初學(xué)的小伙伴們理解跟學(xué)習(xí)2022-08-08
element表格翻頁(yè)第2頁(yè)從1開(kāi)始編號(hào)(后端從0開(kāi)始分頁(yè))
這篇文章主要介紹了element表格翻頁(yè)第2頁(yè)從1開(kāi)始編號(hào)(后端從0開(kāi)始分頁(yè))，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
之前對(duì)于vue中用到過(guò)的checkbox也只是別人寫好的組件，這次在自己實(shí)現(xiàn)時(shí)走了很多坑，特意寫這篇文章記錄到腳本之家平臺(tái)，供大家參考2018-11-11
vue + element-ui的分頁(yè)問(wèn)題實(shí)現(xiàn)
這篇文章主要介紹了vue + element-ui的分頁(yè)問(wèn)題實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
由于Vue多個(gè)狀態(tài)分散的跨越在許多組件和交互間各個(gè)角落，大型應(yīng)用復(fù)雜度也經(jīng)常逐漸增長(zhǎng)。為了解決這個(gè)問(wèn)題，Vue提供了vuex。本文將詳細(xì)介紹Vue狀態(tài)管理vuex,需要的朋友可以參考下2020-02-02
vuejs2.0子組件改變父組件的數(shù)據(jù)實(shí)例
本篇文章主要介紹了vuejs2.0子組件改變父組件的數(shù)據(jù)實(shí)例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05