vue 项目中使用Loading组件的示例代码


Posted in Javascript onAugust 31, 2018

什么是vue插件?

从功能上说,插件是为Vue添加全局功能的一种机制,比如给Vue添加一个全局组件,全局指令等;

从代码结构上说,插件就是一个必须拥有install方法的对象,这个方法的接收的第一个参数是Vue构造函数,还可以接收一个可选的参数,用于配置插件:

var myplugin = {
install:function(Vue, options){
...
}
}

从意义上来说,正如jQuery的$.fn使jQuery有了一个庞大的生态一样,Vue的插件机制使Vue形成了一个生态系统,你可以开发一个插件给别人复用。

当在vue项目中请求后台接口时,常常会使用 loding 过渡数据的加载时间。

如果 loading 作为一个全局的加载状态,应该写在项目中的App.vue中

<template>
  <div id="app">
    <router-view></router-view>
    <loading v-if='LOADING'/> //自己封装的loading 组件
  </div>
</template>

<script>
  export default {
    name: 'App'
  }
</script>

这个Loading 组件通过 LOADING 的状态显示隐藏。我们希望在请求某个接口的时候,将 LOADING 改为true,当接口请求后改为false,这样就能实现loading的过渡效果了。

但是这里有一个问题,loading组件的显示和隐藏是通过 LOADING 来控制的, 如果将 LOADING 直接定义在 App.vue 中,每次请求中直接修改 LOADING 是很麻烦的,所以推荐使用 vuex

第一步:按照官网的例子,在App.vue的同层目录下新建一个 store.js 文件.

// store.js
const store = new Vuex.Store({
  state: {
    LOADING: false
  },
  mutations: {
    showLoading(state){
      state.LOADING = true  
    },
    hideLoading (state) {
      state.LOADING = false
    }
  }
})

第二步: 在 main.js 中引入 store.js,并挂载到 Vue 实列上

import store from './store'

new Vue({
  el: '#app',
  store,
  template: '<App/>',
  components: { App }
})

第三步,在请求中改变 LOADING 的状态

Vue 项目中 API 的请求方法有很多,如果项目比较简单,数据量比较小,可以在在页面中直接使用像 axios、ajax、request等的 post/get 请求。以 axios 为例:

methods:{
  //通常请求都希望以异步的方式,方便数据操作
  async test(){
    this.$store.commit('showLoading')
    //这里需要将 axios 提前挂载到 Vue的属性上。
    await this.$axios.get('xxx/xxxx/xxx')
    this.$store.commit('hideLoading')
  }
}

第四步: 监听 LOADING 状态

Vuex 中 state 是动态更新的,也就是不管在任何地方对某一个 state的值做了修改,那么依赖该数据的 DOM 也将会发生改变。修改 App.vue 文件,监听 LOADING 的值的变化。

<template>
  <div id="app">
    <router-view></router-view>
    <loading v-if='LOADING'/> //自己封装的loading 组件
  </div>
</template>

<script>
  import {mapState} from 'vuex'

  export default {
    computed:{
      ...mapState([
        'LOADING'
      ])
    },
    name: 'App'
  }
</script>

总结:

loading的过渡效果最根本的就是通过 state 来控制 loading 组件的显示和隐藏。在请求接口前使该状态为 为 true,接口完成后改为 false。

简单的 loading 组件

一个简单的 loading 组件,应该会有一个遮罩层,一个过度动画,或者一个loading 说明。

<template>
  <section>
    <div class='mock'>
      <div class='main'>
        loading...
      </div>
    </div>
  </section>
</template>  
<style>
  section{
    width:100vh;
    height:100vh;
    position:relative;
  }
  .mock{
    tion{
    width:100vh;
    height:100vh;
    position:absolute;
     z-index:100;
    background-color:#abb2bf;
  }
  .main{
    margin:200px auto;
    text-align:center:
  }
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript快速检测浏览器对CSS3特性的支持情况
Sep 26 Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
Jan 16 Javascript
JavaScript 验证码的实例代码(附效果图)
Mar 22 Javascript
js和jquery使按钮失效为不可用状态的方法
Jan 26 Javascript
一篇文章掌握RequireJS常用知识
Jan 26 Javascript
Javascript类型系统之String字符串类型详解
Jun 21 Javascript
JavaScript中最常用的10种代码简写技巧总结
Jun 28 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
Jul 05 Javascript
vue组件与复用详解
Apr 08 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
May 25 Javascript
Vue组件间数据传递的方式(3种)
Jul 13 Javascript
深入了解Vue动态组件和异步组件
Jan 26 Vue.js
解决Angular2 router.navigate刷新页面的问题
Aug 31 #Javascript
浅谈angularJS2中的界面跳转方法
Aug 31 #Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
Aug 31 #Javascript
Angular2之二级路由详解
Aug 31 #Javascript
基于jQuery ztree实现表格风格的树状结构
Aug 31 #jQuery
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
Aug 31 #Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
Aug 31 #Javascript
You might like
Oracle 常见问题解答
2006/10/09 PHP
用PHP实现小写金额转换大写金额的代码(精确到分)
2012/01/10 PHP
PHP中unset,array_splice删除数组中元素的区别
2014/07/28 PHP
php简单实现短网址(短链)还原的方法(测试可用)
2016/05/09 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
php实现姓名根据首字母排序的类与方法(实例代码)
2018/05/16 PHP
PHP常用函数之base64图片上传功能详解
2019/10/21 PHP
Js获取事件对象代码
2010/08/05 Javascript
简单的jquery左侧导航栏和页面选中效果
2014/08/21 Javascript
js实现屏幕自适应局部代码分享
2015/01/30 Javascript
Javascript进制转换实例分析
2015/05/14 Javascript
js实现新年倒计时效果
2015/12/10 Javascript
JS控制按钮10秒钟后可用的方法
2015/12/22 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
2016/12/30 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
2017/07/27 Javascript
nodejs调取微信收货地址的方法
2017/12/20 NodeJs
浅析微信扫码登录原理(小结)
2018/10/29 Javascript
vue实现图片上传功能
2020/05/28 Javascript
Python+matplotlib+numpy绘制精美的条形统计图
2018/01/02 Python
Python编程实现从字典中提取子集的方法分析
2018/02/09 Python
tensorflow实现图像的裁剪和填充方法
2018/07/27 Python
Python Datetime模块和Calendar模块用法实例分析
2019/04/15 Python
Python绘制堆叠柱状图的实例
2019/07/09 Python
Python Print实现在输出中插入变量的例子
2019/12/25 Python
Canvas 文本填充线性渐变的使用详解
2020/06/22 HTML / CSS
财务会计实习报告体会
2013/12/20 职场文书
四查四看剖析材料
2014/02/14 职场文书
2014年中秋寄语
2014/08/11 职场文书
销售人员工作自我评价
2014/09/21 职场文书
机关作风整顿个人剖析材料
2014/10/06 职场文书
工作失职检讨书(精华篇)
2014/10/15 职场文书
班主任2015新年寄语
2014/12/08 职场文书
预备党员转正材料
2014/12/19 职场文书
自愿离婚协议书2015
2015/01/26 职场文书
正规借条模板
2015/05/26 职场文书
css实现两栏布局,左侧固定宽,右侧自适应的多种方法
2021/08/07 HTML / CSS