項(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組件中使用
// 顯示loadingthis.bus.$emit('loading', true);// 關(guān)閉loadingthis.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)容比較簡單，想實(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)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
