vue中使用公用的提示弹层、加载loading

 

项目结构，在组件文件夹(components)下新建common文件夹，所用公用组件放里面，本例包含tips和loading两个

 

 

一、loading组件

1.loading.vue组件内容如下：

2.app.vue中设置：

3.在main.js中设置 

Vue.prototype.bus = new Vue;

 4.在.vue组件中使用

// 显示loading
this.bus.$emit('loading', true);

// 关闭loading
this.bus.$emit('loading', false);

//效果如下

 

二、tips组件

1.tips.vue组件内容如下：

2.app.vue中设置： 

3.在main.js中设置 

Vue.prototype.bus = new Vue;

4.在.vue组件中使用 

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

//效果如下

本例使用的tips内容比较简单，想实现复杂的扩充即可，实现方法是一样的

其他公共组件实现方法类似