vue開發(fā)自定義的全局公共組件詳解
更新時(shí)間：2024年10月11日 10:41:13 作者：夢一場江南煙雨
本文介紹了如何開發(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è)文件夾，我這里做的是全局加載動畫組件所以命名的是Loading文件夾
如圖：
其中index.js為組件加載文件，index.vue為組件模板文件
index.js文件：
// 引入組件
import Loading from './index.vue'
// 創(chuàng)建個(gè)空對象
const obj = {}
// 設(shè)置安裝方法
obj.install = (Vue) => {
// 1. 創(chuàng)建組件構(gòu)造器
const LoadingConstructor = Vue.extend(Loading)
// 2. new 的方式，根據(jù)組件構(gòu)造器，可以創(chuàng)建出來一個(gè)組件對象
const loading = new LoadingConstructor()
// 3. 將組件對象手動掛載到某一個(gè)元素上掛載會替換元素內(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)出對象
export default obj
index.vue文件：
<template>
<div class="loading-wrap" v-if="block || bar || water">
<!-- 條狀加載動畫 -->
<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>
<!-- 方塊狀加載動畫 -->
<div class="block-load" v-if="block">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<!-- 水波加載動畫 -->
<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
}
// 如果傳入的是對象{類型，加載時(shí)間}
const { type, duration } = val || {}
if (typeof val === 'object') {
this[type] = true
// 如果duration > 0,否則永久展示loading動畫
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ā)的加載動畫，各位可直接復(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ù)可傳：對象、字符串、或者不傳
// 對象：{
// 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ā)好了，接下來是另外一種
第二種此處不做介紹
就跟普通的父子組件開發(fā)模式類似，不同的是，需要在main.js里面進(jìn)行引入和自定義注冊組件，全局自定義組件使用
Vue.component("Loading", Loading)總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue.js+Echarts開發(fā)圖表放大縮小功能實(shí)例
本篇文章主要介紹了vue.js+Echarts開發(fā)圖表放大縮小功能實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
在Vue項(xiàng)目中使用Element UI的表格組件時(shí),可以通過具體的單元格渲染方法添加超鏈接,在表格的某列中,利用模板或渲染函數(shù)插入<a>標(biāo)簽,設(shè)置其href屬性指向目標(biāo)URL,實(shí)現(xiàn)點(diǎn)擊跳轉(zhuǎn)功能,此方法適用于需要從表格信息中快速導(dǎo)航到相關(guān)詳細(xì)頁面的場景2024-09-09
Vue異步更新DOM及$nextTick執(zhí)行機(jī)制解讀
這篇文章主要介紹了Vue異步更新DOM及$nextTick執(zhí)行機(jī)制解讀，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
vue使用element-plus依賴實(shí)現(xiàn)表格增加的示例代碼
這篇文章主要為大家詳細(xì)介紹了vue使用element-plus依賴實(shí)現(xiàn)表格增加,文中示例代碼講解的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2023-12-12
vue項(xiàng)目如何監(jiān)聽localStorage或sessionStorage的變化
這篇文章主要介紹了vue 項(xiàng)目如何監(jiān)聽localStorage或sessionStorage的變化，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
最近有個(gè)項(xiàng)目需求就是在客戶端的右上角要實(shí)時(shí)展示提醒消息,下面這篇文章主要給大家介紹了關(guān)于Vue通知提醒框(Notification)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
前端vue3中的ref與reactive用法及區(qū)別總結(jié)
這篇文章主要給大家介紹了關(guān)于前端vue3中的ref與reactive用法及區(qū)別的相關(guān)資料,關(guān)于ref及reactive的用法,還是要在開發(fā)中多多使用,遇到響應(yīng)式失效問題,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-08-08
Vue.js中的refs屬性是一個(gè)非常有用的特性,它允許我們在組件中操作 DOM 元素和組件實(shí)例,本文來介紹一下Vue寶典之this.$refs屬性的使用,感興趣的可以了解一下2023-12-12
這篇文章主要介紹了Vue??控制元素顯示隱藏的方法和區(qū)別,需要的朋友可以參考下2022-12-12
端午將至，大家都開始吃粽子了么？本文將用vite2與vue3開發(fā)出一個(gè)招財(cái)貓小游戲，在圖案不停滾動的同時(shí)選出可以轉(zhuǎn)出不同的素材最終得到粽子獎勵，康康你能用多少次才會轉(zhuǎn)出自己喜愛口味的粽子吧2022-05-05