vue-cli項目中使用公用的提示彈層tips或加載loading組件實例詳解
更新時間：2018年05月28日 10:43:32 作者：web_xyk
這篇文章主要介紹了vue-cli項目中使用公用的提示彈層tips或加載loading組件,本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下
項目結(jié)構(gòu)，在組件文件夾(components)下新建common文件夾，所用公用組件放里面，本例包含tips和loading兩個
一、loading組件
1.loading.vue組件內(nèi)容如下：
代碼：
<template>
<div class="loading" v-show="loading">
<img src="./loading.gif">
</div>
</template>
<script>
export default {
name: 'loading',
data() {
return {
loading: false
}
},
created() {
var that = this;
this.bus.$on('loading', function (data) {
that.loading = !!data;
})
}
}
</script>
<style scoped lang="scss">
.loading{
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
position: fixed;
left: 0;
top: 0;
z-index: 999;
width: 100 %;
height: 100 %;
color: #fff;
background - color: rgba(0, 0, 0, 0.8);
p {
padding: .15rem .15rem .2rem;
color: #fff;
font-size: .16rem;
}
img {
width: .4rem;
height: .4rem;
}
}
</style>
2.app.vue中設置
<template>
<div id="app">
<router-view/>
<loading></loading>
</div>
</template>
<script>
import tips from '@/components/common/tips'
import loading from '@/components/common/loading'
export default {
name: 'App',
components:{tips,loading}
}
</script>
在main.js中設置
Vue.prototype.bus = new Vue;
3.在.vue組件中使用
// 顯示loading
this.bus.$emit('loading', true);
// 關(guān)閉loading
this.bus.$emit('loading', false);
效果如下
二、tips組件
1.內(nèi)容：
代碼：
<template>
<!-- 提示彈層 -->
<div class="tips" v-show="tips.show">
<h3>{{tips.title}}</h3>
</div>
</template>
<script>
export default {
name: 'tips',
data (){
return {
// 可以根據(jù)實際情況寫更復雜的彈層，根據(jù)情況擴充tips即可
tips:{
show:false,
title:''
}
}
},
created () {
this.bus.$on('tips',(data)=>{
this.tips = data;
})
},
watch:{
// 檢測tips變化，顯示提示1.5s之后自動關(guān)閉，可根據(jù)實際情況自動修改時間
tips:function(){
if(this.tips.show){
setTimeout( ()=>{
this.tips.show = false;
},1500)
}
}
}
}
</script>
<style scoped lang="scss">
.tips{
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
position: fixed;
left: 0;
top: 0;
z-index: 999;
width: 100%;
height: 100%;
color: #fff;
h3{
padding: .1rem .2rem;
font-size: 12px;
line-height: 12px;
background-color: rgba(0,0,0,0.8);
border-radius: 4px;
}
}
</style>
2.app.vue中設置
在main.js中設置
Vue.prototype.bus = new Vue;
3.在.vue組件中使用
this.bus.$emit('tips', { show: true, title: '我是標題'})
效果：
本例使用的tips內(nèi)容比較簡單，想實現(xiàn)復雜的擴充即可，實現(xiàn)方法是一樣的
其他公共組件實現(xiàn)方法類似
總結(jié)
以上所述是小編給大家介紹的vue-cli項目中使用公用的提示彈層tips或加載loading組件，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
一直對編譯原理的東西都有一種恐懼感，感覺太難了，看不懂，打開vue3源碼看到編譯相關(guān)的代碼，直接嚇退。不要擔心，小編今天帶你一文吃透Vue3編譯原理2023-02-02
這篇文章主要為大家詳細介紹了vue3.0實現(xiàn)考勤日歷組件使用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
vue實現(xiàn)輸入一位數(shù)字轉(zhuǎn)漢字功能
這篇文章主要介紹了vue實現(xiàn)輸入一位數(shù)字轉(zhuǎn)漢字功能，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12
讓多個組件使用同一個掛載點,并動態(tài)切換,這就是動態(tài)組件,下面這篇文章主要給大家介紹了關(guān)于Vue高級用法實例教程之動態(tài)組件的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2021-11-11
這篇文章主要介紹了使用100行代碼實現(xiàn)vue表單校驗功能，本文通過實例截圖給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11
本文主要介紹了vue可視化大屏實現(xiàn)無線滾動列表飛入效果，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-04-04
這篇文章主要為大家詳細介紹了vue實現(xiàn)表格過濾功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
在寫vue項目時,有個需求是點擊表格中某一行的下載按鈕,然后開始下載這一行對應的文件,所以本文小編給大家介紹了使用vue3實現(xiàn)點擊按鈕下載文件功能,文中有詳細的代碼示例供大家參考,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了vue組件中實現(xiàn)嵌套子組件案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
混入 (mixin) 提供了一種非常靈活的方式，來分發(fā) Vue 組件中的可復用功能。一個混入對象可以包含任意組件選項。當組件使用混入對象時，所有混入對象的選項將被“混合”進入該組件本身的選項2022-09-09