vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解

 <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>

<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>

Vue.prototype.bus = new Vue;

// 显示loadingthis.bus.$emit('loading', true);// 关闭loadingthis.bus.$emit('loading', false);

<template> <!-- 提示弹层 --> <div class="tips" v-show="tips.show"> <h3>{{tips.title}}</h3>  </div></template><script> export default { name: 'tips', data (){ return {   // 可以根据实际情况写更复杂的弹层，根据情况扩充tips即可  tips:{  show:false,  title:''  } } }, created () { this.bus.$on('tips',(data)=>{  this.tips = data; }) }, watch:{ // 检测tips变化，显示提示1.5s之后自动关闭，可根据实际情况自动修改时间 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>

Vue.prototype.bus = new Vue;

this.bus.$emit('tips', { show: true, title: '我是标题'})