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中关于节点内容加强
Apr 11 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
Jan 11 Javascript
JavaScript访问CSS属性的几种方式介绍
Jul 21 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
Sep 19 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
Dec 08 Javascript
微信小程序 欢迎页面的制作(源码下载)
Jan 09 Javascript
webpack 4.0.0-beta.0版本新特性介绍
Feb 10 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
vue中倒计时组件的实例代码
Jul 06 Javascript
JS实现基本的网页计算器功能示例
Jan 16 Javascript
Node.js API详解之 os模块用法实例分析
May 06 Javascript
二维码条形码生成的JavaScript脚本库
Jul 07 Javascript
解决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
PHP静态新闻列表自动生成代码
2007/06/14 PHP
PHP 多维数组的排序问题 根据二维数组中某个项排序
2011/11/09 PHP
做了CDN获取用户真实IP的函数代码(PHP与Asp设置方式)
2013/04/13 PHP
PHP 中提示undefined index如何解决(多种方法)
2016/03/16 PHP
Yii2.0框架模型添加/修改/删除数据操作示例
2019/07/18 PHP
js实现ArrayList功能附实例代码
2014/10/29 Javascript
移动端JQ插件hammer使用详解
2015/07/03 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
2016/09/06 Javascript
Vue.js实现无限加载与分页功能开发
2016/11/03 Javascript
深入了解JavaScript的逻辑运算符(与、或)
2016/12/20 Javascript
Vue2递归组件实现树形菜单
2017/04/10 Javascript
详解如何在React组件“外”使用父组件的Props
2018/01/12 Javascript
简单说说angular.json文件的使用
2018/10/29 Javascript
微信小程序实现点击效果
2019/06/21 Javascript
[03:17]2014DOTA2 国际邀请赛中国区预选赛 四强专访
2014/05/23 DOTA
[01:15:36]加油刀塔第二期网络版
2014/08/09 DOTA
python命令行参数sys.argv使用示例
2014/01/28 Python
Python中用于去除空格的三个函数的使用小结
2015/04/07 Python
利用Python暴力破解zip文件口令的方法详解
2017/12/21 Python
centos6.8安装python3.7无法import _ssl的解决方法
2018/09/17 Python
对Django 中request.get和request.post的区别详解
2019/08/12 Python
python查看数据类型的方法
2019/10/12 Python
python分布式计算dispy的使用详解
2019/12/22 Python
俄语地区最大的中国商品在线购物网站之一:Umka Mall
2019/11/03 全球购物
中科方德软件测试面试题
2016/04/21 面试题
生产经理的自我评价分享
2013/11/07 职场文书
客户表扬信范文
2014/01/10 职场文书
新浪微博实习心得体会
2014/01/27 职场文书
节约用电标语
2014/06/17 职场文书
珠宝的促销活动方案
2014/08/31 职场文书
团员自我评价范文
2015/03/10 职场文书
2015年高二班主任工作总结
2015/05/25 职场文书
教师节主持词开场白
2015/05/29 职场文书
转学证明范本
2015/06/19 职场文书
合同补充协议书
2016/03/24 职场文书
还在手动盖楼抽奖?教你用Python实现自动评论盖楼抽奖(一)
2021/06/07 Python