vue-cli項(xiàng)目中使用公用的提示彈層tips或加載loading組件實(shí)例詳解
更新時(shí)間：2018年05月28日 10:43:32 作者：web_xyk
這篇文章主要介紹了vue-cli項(xiàng)目中使用公用的提示彈層tips或加載loading組件,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
項(xiàng)目結(jié)構(gòu)，在組件文件夾(components)下新建common文件夾，所用公用組件放里面，本例包含tips和loading兩個(gè)
一、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中設(shè)置
<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中設(shè)置
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ù)實(shí)際情況寫更復(fù)雜的彈層，根據(jù)情況擴(kuò)充tips即可
tips:{
show:false,
title:''
}
}
},
created () {
this.bus.$on('tips',(data)=>{
this.tips = data;
})
},
watch:{
// 檢測(cè)tips變化，顯示提示1.5s之后自動(dòng)關(guān)閉，可根據(jù)實(shí)際情況自動(dòng)修改時(shí)間
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中設(shè)置
在main.js中設(shè)置
Vue.prototype.bus = new Vue;
3.在.vue組件中使用
this.bus.$emit('tips', { show: true, title: '我是標(biāo)題'})
效果：
本例使用的tips內(nèi)容比較簡(jiǎn)單，想實(shí)現(xiàn)復(fù)雜的擴(kuò)充即可，實(shí)現(xiàn)方法是一樣的
其他公共組件實(shí)現(xiàn)方法類似
總結(jié)
以上所述是小編給大家介紹的vue-cli項(xiàng)目中使用公用的提示彈層tips或加載loading組件，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
vue制作點(diǎn)擊切換圖片效果的詳細(xì)思路與步驟
這篇文章主要給大家介紹了關(guān)于vue制作點(diǎn)擊切換圖片效果的詳細(xì)思路與步驟,圖片切換是一個(gè)很經(jīng)典的Vue入門學(xué)習(xí)案例,在你學(xué)習(xí)完一些基本的v-指令后,你可以嘗試去寫一個(gè)簡(jiǎn)單的demo去鞏固和熟悉這些指令的使用方法,需要的朋友可以參考下2023-11-11
vue封裝el-upload批量上傳只請(qǐng)求一次接口
本文主要介紹了vue封裝el-upload批量上傳只請(qǐng)求一次接口，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
Vue.js目前已經(jīng)更新到2.x，功能和語法上有一定升級(jí)和修改，本文首先介紹基礎(chǔ)內(nèi)容。感興趣的朋友一起看看吧2017-10-10
這篇文章主要介紹了vue組件props傳值,對(duì)象獲取不到的問題,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-06-06
Vue3非遞歸渲染Tree組件的初步實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue3非遞歸渲染Tree組件的初步實(shí)現(xiàn),文中通過代碼示例講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定幫助,需要的朋友可以參考下2024-05-05
詳解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 構(gòu)建記事本應(yīng)用
本篇文章主要介紹了詳解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 構(gòu)建記事本應(yīng)用 ，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
vue本地模擬服務(wù)器請(qǐng)求mock數(shù)據(jù)的方法詳解
這篇文章主要給大家介紹了關(guān)于vue本地模擬服務(wù)器請(qǐng)求mock數(shù)據(jù)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-03-03
vue離開當(dāng)前頁面觸發(fā)的函數(shù)代碼
這篇文章主要介紹了vue離開當(dāng)前頁面觸發(fā)的函數(shù)代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue如何實(shí)現(xiàn)本項(xiàng)目頁面之間跳轉(zhuǎn)
這篇文章主要介紹了vue如何實(shí)現(xiàn)本項(xiàng)目頁面之間跳轉(zhuǎn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
在Vue3.0框架中,hooks函數(shù)允許將組件邏輯抽離復(fù)用,提高代碼的可維護(hù)性和復(fù)用性,通過封裝邏輯如獲取數(shù)據(jù)、處理狀態(tài)等,hooks使得組件開發(fā)更加高效和清晰,示例中,useDog.ts用于獲取狗狗圖片,展示了hooks封裝數(shù)據(jù)和邏輯、響應(yīng)式數(shù)據(jù)和異步操作的能力2024-10-10