快捷導(dǎo)航

vue開發(fā)自定義的全局公共組件詳解

更新時(shí)間：2024年10月11日 10:41:13 作者：夢(mèng)一場(chǎng)江南煙雨

本文介紹了如何開發(fā)自定義全局公共組件的兩種方法,第一種方法是通過在components文件夾中創(chuàng)建新的組件文件夾,例如Loading文件夾,并在其中創(chuàng)建index.js和index.vue文件,通過在vue的入口文件main.js中進(jìn)行引入,可以實(shí)現(xiàn)組件的全局調(diào)用

vue開發(fā)自定義的全局公共組件

這里我主要介紹兩種自定義全局公共組件的方法

第一種

首先在components中新建一個(gè)文件夾，我這里做的是全局加載動(dòng)畫組件所以命名的是Loading文件夾

如圖：

其中index.js為組件加載文件，index.vue為組件模板文件

index.js文件：

// 引入組件
import Loading from './index.vue'
// 創(chuàng)建個(gè)空對(duì)象
const obj = {}
// 設(shè)置安裝方法
obj.install = (Vue) => {
    // 1. 創(chuàng)建組件構(gòu)造器
    const LoadingConstructor = Vue.extend(Loading)
    // 2. new 的方式，根據(jù)組件構(gòu)造器，可以創(chuàng)建出來一個(gè)組件對(duì)象
    const loading = new LoadingConstructor()
    // 3. 將組件對(duì)象手動(dòng)掛載到某一個(gè)元素上掛載會(huì)替換元素內(nèi)容,這里創(chuàng)建了一個(gè)div元素來作為被替換內(nèi)容
    loading.$mount(document.createElement('div'))
    // 4. 將組件添加到dom中
    document.body.appendChild(loading.$el)
    // 5. 將$loading掛載到Vue的原型上
    Vue.prototype.$loading = loading
}
// 導(dǎo)出對(duì)象
export default obj

index.vue文件：

<template>
    <div class="loading-wrap" v-if="block || bar || water">
        <!-- 條狀加載動(dòng)畫 -->
        <div class="bar-load" v-if="bar">
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>
        </div>
        <!-- 方塊狀加載動(dòng)畫 -->
        <div class="block-load" v-if="block">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
		<!-- 水波加載動(dòng)畫 -->
		<div class="water-load" v-if="water">
			<span class="circle circle1"></span>
			<span class="circle circle2"></span>
		</div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                block: false,
                bar: false,
                water: false
            }
        },
        methods: {
            // loading展示
            show(val) {
                // 如果沒有傳入類型，默認(rèn)為條狀loading
                if (!val) {
                    this.bar = true
                    return
                }
                // 如果傳入的是對(duì)象{類型，加載時(shí)間}
                const { type, duration } = val || {}
                if (typeof val === 'object') {
                    this[type] = true
                    // 如果duration > 0,否則永久展示loading動(dòng)畫
                    if (duration && duration > 0) {
                        setTimeout(() => {
                            this[type] = false
                        }, duration)
                    }
                    return
                }
                // 如果傳入的就是某個(gè)loading類型
                this[val] = true
            },
            // loading隱藏
            hide() {
                this.block = false
                this.bar = false
            }
        }
    }
</script>
<style lang="scss">
.loading-wrap{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>

<!-- 條狀loading -->
<style lang="scss">
.loading-wrap{
    .bar-load{
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        position: relative;
        .item{
            display: inline-block;
            opacity: 0;
            width: 6px;
            height: 30px;
            margin: 0 5px;
            border-radius: 4px;
            position: relative;
            animation: move 1s ease infinite;
            background: linear-gradient(to bottom, rgb(160, 192, 150), #1989fa, #ffd01e);
            &:nth-child(2){
                animation-delay: .2s;
            }
            &:nth-child(3){
                animation-delay: .4s;
            }
            &:nth-child(4){
                animation-delay: .6s;
            }
            &:nth-child(5){
                animation-delay: .8s;
            }
        }
    }
    @keyframes move {
        0% {
            height: 20px;
            opacity: 0;
            background: linear-gradient(to bottom, rgb(160, 192, 150), #1989fa, #ffd01e);
        }
        50% {
            height: 50px;
            margin: -15px 5px;
            opacity: 1;
            background: linear-gradient(to bottom, rgb(160, 192, 150), #ffd01e, #1989fa);
        }
        100% {
            height: 20px;
            opacity: 0;
            background: linear-gradient(to bottom, rgb(160, 192, 150), #1989fa, #ffd01e);
        }
    }
}
</style>

<!-- 方塊轉(zhuǎn)loading -->
<style lang="scss">
.loading-wrap{
    .block-load{
        width: 150px;
        height: 15px;
        margin: 0 auto;
        text-align: center;
        span{
            display: inline-block;
            opacity: 0;
            width: 15px;
            height: 100%;
            margin-right: 5px;
            background: #1989fa;
            -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
            -webkit-animation: load 1s ease infinite;
            animation: load 1s ease infinite;
            &:last-child{
                margin-right: 0px;
            }
            &:nth-child(1){
                -webkit-animation-delay: 0.13s;
                animation-delay: 0.13s;
            }
            &:nth-child(2){
                -webkit-animation-delay: 0.26s;
                animation-delay: 0.26s;
            }
            &:nth-child(3){
                -webkit-animation-delay: 0.39s;
                animation-delay: 0.39s;
            }
            &:nth-child(4){
                -webkit-animation-delay: 0.52s;
                animation-delay: 0.52s;
            }
            &:nth-child(5){
                -webkit-animation-delay: 0.65s;
                animation-delay: 0.65s;
            }
        }
    }
    @-webkit-keyframes load{
        0%{
            opacity: 1;
            -webkit-transform: scale(1);
        }
        100%{
            opacity: 0;
            -webkit-transform: rotate(90deg) scale(.3);
        }
    }
    @keyframes load{
        0%{
            opacity: 1;
            -webkit-transform: scale(1);
        }
        100%{
            opacity: 0;
            -webkit-transform: rotate(90deg) scale(.3);
        }
    }
}
</style>

<!-- 水波加載loading -->
<style lang="scss" scoped>
.loading-wrap{
	.water-load{
	    width: 100px;
        height: 100px;
        margin: 0 auto;
        text-align: center;
		background: rgb(41, 134, 196);
    	border-radius: 50%;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		.circle{
			display: inline-block;
            position: absolute;
            width: 90px;
            height: 90px;
            border-radius: 50%;
            // border: 5px solid rgb(246, 247, 248);
            box-shadow: 0 0 0 3px rgb(41, 134, 196);
			overflow: hidden;
		}
		.circle1{
			&::before{
				content: '';
				position: absolute;
				top: 0;
				left: 50%;
				width: 150%;
				height: 150%;
				border-radius: 40%;
				background: rgb(240, 228, 228);
				animation: moveingOne 5s linear infinite;
			}
			&::after{
				content: '';
				position: absolute;
				top: 0;
				left: 50%;
				width: 150%;
				height: 150%;
				border-radius: 45%;
				background: rgba(240, 228, 228, 0.2);
				animation: moveingTwo 8s linear infinite;
			}
		}
		.circle2{
			&::before{
				content: '';
				position: absolute;
				top: 0;
				left: 50%;
				width: 150%;
				height: 150%;
				border-radius: 42%;
				background: rgb(240, 228, 228);
				animation: moveingThree 11s linear infinite;
			}
			&::after{
				content: '';
				position: absolute;
				top: 0;
				left: 50%;
				width: 150%;
				height: 150%;
				border-radius: 40%;
				background: rgba(240, 228, 228, 0.2);
				animation: moveingFour 14s linear infinite;
			}
		}
		@keyframes moveingOne{
            0%{
                transform: translate(-55%,-65%) rotate(0deg);
            }
            100%{
                transform: translate(-55%,-65%) rotate(360deg);
            }
		}
		@keyframes moveingTwo{
            0%{
                transform: translate(-50%,-60%) rotate(0deg);
            }
            100%{
                transform: translate(-50%,-60%) rotate(360deg);
            }
		}
		@keyframes moveingThree{
            0%{
                transform: translate(-50%,-65%) rotate(0deg);
            }
            100%{
                transform: translate(-50%,-65%) rotate(360deg);
            }
		}
		@keyframes moveingFour{
            0%{
                transform: translate(-45%,-60%) rotate(0deg);
            }
            100%{
                transform: translate(-45%,-60%) rotate(360deg);
            }
		}
	}
}
</style>

這是我自己開發(fā)的加載動(dòng)畫，各位可直接復(fù)制使用

組件模板開發(fā)好后，接下來就是在vue的入口文件main.js中進(jìn)行引入

main.js文件里加入以下代碼：

import Vue from 'vue'

// 導(dǎo)入組件
import loading from '@/components/Loading'

// 使用
Vue.use(loading)

接下來等項(xiàng)目跑起來后我們就可以根據(jù)在組件加載文件index.js里面設(shè)置的調(diào)用方法進(jìn)行全局調(diào)用了

我設(shè)置的是：

    // 將$loading掛載到Vue的原型上
    Vue.prototype.$loading = loading

再看index.vue文件里methods設(shè)置的方法，

因此全局調(diào)用的方法就是：

// 顯示
this.$loading.show()
// show({ obj }) 可接受傳參
// this.$loading.show(arguments) // 顯示
// arguments為參數(shù)可傳：對(duì)象、字符串、或者不傳
// 對(duì)象：{
//     type: 'bar' || 'block' || 'water', // loading形狀：（bar: 條狀，block：方塊狀, water: 水波狀）,
//    duration: 3000 // loading展示時(shí)間，不傳或者傳0就一直展示
// }
// 例如：this.$loading.show({
//      type: 'bar',
//     duration: 3000
// })
// 字符串：this.$loading.show('bar')
// 或者不傳：this.$loading.show() // 不傳默認(rèn)loading展示類型為bar
// this.$loading.hide() // 隱藏
// 隱藏
this.$loading.hide()

第一種全局公共組件就這么開發(fā)好了，接下來是另外一種