vue多页面项目使用全局Loading组件

2019-06-14 admin

多页面vue应用中,在请求接口之前统一加上Loading作为未请求到数据之前的过渡展示。 由于多页面未使用vuex做状态管理,只在入口统一注册了bus,所以此例子使用eventbus做事件通信。

在Loading.vue中,一个简单的公共loading组件

这个loading组件用showLoading控制展示与否。

<template>
  <div class="loading" v-show="showLoading">
    <img/>
    <p>加载中...</p>
  </div>
</template>

Loading.vue中,用bus接收全局事件,控制组件的显示隐藏

用SHOW_LOADING和HIDE_LOADING事件控制组件的显示隐藏

<script>
import { Bus, SHOW_LOADING, HIDE_LOADING } from 'utils/bus'
export default {
  name: 'loading',
  data () {
    return {
      showLoading: false
    }
  },
  created () {
    this.loadingFn()
  },
  methods: {
    loadingFn () {
      Bus.$on(SHOW_LOADING, () => {
        this.showLoading = true
      })

      Bus.$on(HIDE_LOADING, () => {
        this.showLoading = false
    }
  },
}
</script>

ajax请求中统一做处理

以ajax请求为例,可以在beforeSend和complete钩子函数中emit对应的隐藏和显示事件。

new Promise((resolve, reject) => {
    let defaultOpt = {
      url,
      type: config.method || 'POST',
      data: params || {},
      timeout: 50000,
      contentType: 'application/x-www-form-urlencoded',
      dataType: json
    }

    defaultOpt.beforeSend = (xhr, settings) => {
      if(config.setLoad){
        Bus.$emit(SHOW_LOADING)
      } else {
        Bus.$emit(HIDE_LOADING)
      }
    }

    defaultOpt.complete = () => {
      Bus.$emit(HIDE_LOADING)
    }

    $.ajax(defaultOpt)
  })

将bus注册在多页面的应用的main.js中

由于每个页面都有可能用到这个效果,这时候会在全局注册一些公共的组件,这样哪个页面需要用到,不需要重新引入,直接调用组件即可。

import Vue from 'vue'
import App from './App.vue'
import bus from 'utils/bus'
import components from 'utils/components.js'

// 注册统一的bus应用
Vue.prototype.$bus = bus
// 全局注册组件
Vue.use(components)

new Vue({
  render: h => h(App)
}).$mount('#app')

components.js里放置需要全局注册的组件

import Loading from 'components/Loading.vue'
export default (Vue) => {
  Vue.component('Loading', Loading),
  // 其他组件
}

额外需要注意的

用的时候直接引入到需要的页面即可。 但是会有一个小小的问题,假设某个页面在created里就要请求接口,这时候Bus.$emit(SHOW_LOADING) 会无法被接收到。因为这时候Loading组件还未能加载完成,Bus.$on(SHOW_LOADING)还未能注册上。所以,临时的解决方案是将请求先放在mounted钩子里。

[转载]原文链接:https://segmentfault.com/a/1190000019481462

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-67315.html

文章标题:vue多页面项目使用全局Loading组件

相关文章
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: &lt;template...
2017-03-13
YouTube正式默认使用HTML5视频播放器
YouTube视频网站现在默认使用HTML5播放器,这意味着更好的性能、 稳定性、 电池寿命和甚至是更好的安全性。现在用户通过Chrome、IE 11、Safari 8和Beta版本的Firefox进行浏览的时候都默认使用HTML5视频播放...
2015-11-12
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; ...
2017-03-13
使用jspdf生成pdf报表
由于前台html已经动态生成报表,而且,前台有一个功能,一个date range组件,当你拖动的时候,报表会在不提交到后台的情况下动态变化。 因此需要用到js生成生报表: 用到的组件: jquery.js jspdf.js canvg.js...
2017-03-25
jQuery中DOM树操作之使用反向插入方法实例分析
本文实例讲述了jQuery中DOM树操作之使用反向插入方法。分享给大家供大家参考。具体分析如下: 使用反向插入方法 这里我们先把创建的内容插人到元素前面,然后再把同一个元素插人到文档 中的另一个位置。通常,当在jQuery中操作元素时,利用...
2015-11-13
梳理前端开发使用eslint-prettier检查和格式化代码
问题痛点 在团队的项目开发过程中,代码维护所占的时间比重往往大于新功能的开发。因此编写符合团队编码规范的代码是至关重要的,这样做不仅可以很大程度地避免基本语法错误,也保证了代码的可读性。 对于代码版本管理系统(svn 和 git或者其他)...
2018-05-07
vue.js实现请求数据的方法示例
vue2.0示例代码如下: var vm = new Vue({ el:&quot;#list&quot;, data:{ gridData: &quot;&quot;, }, ...
2017-03-20
Bootstrap BootstrapDialog使用详解
这里有两种展现方式 写在前面:首先你要引入的库有 css : bootstrap.min.css bootstrap-dialog.css js : jquery-1.11.1.min.js bootstrap.min.js bootstr...
2017-03-16
三步搞定vue在vscode的环境配置问题
1. vscode基础开发插件 vscode-icons 图标美化 Debugger for Chrome 调试 Beautify 代码格式化 Prettier 代码格式化 ESLint 代码规范 JavaScript (ES6) cod...
2017-12-25
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
直接贴代码了: 先上输入前的样子: &lt;style&gt; #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block...
2017-03-17
回到顶部