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 更严格的相等 [译]
Sep 20 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
Dec 13 Javascript
jQuery操作JSON的CRUD用法实例
Feb 25 Javascript
深入分析Javascript跨域问题
Apr 17 Javascript
Vue.js快速入门实例教程
Oct 15 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
Jun 13 Javascript
mui上拉加载更多下拉刷新数据的封装过程
Nov 03 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
Sep 03 Javascript
JavaScript canvas绘制渐变颜色的矩形
Feb 18 Javascript
js最全的数组的降维5种办法(小结)
Apr 28 Javascript
JS前后端实现身份证号验证代码解析
Jul 23 Javascript
vue实现移动端返回顶部
Oct 12 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/02/14 PHP
深入PHP变量存储的详解
2013/06/13 PHP
浅析PHP编程中10个最常见的错误
2014/08/08 PHP
PHP下载远程图片并保存到本地方法总结
2016/01/22 PHP
PHP中的session安全吗?
2016/01/22 PHP
TextArea不支持maxlength的解决办法(jquery)
2011/09/13 Javascript
早该知道的7个JavaScript技巧
2013/03/27 Javascript
JavaScript简单下拉菜单实例代码
2015/09/07 Javascript
Javascript模仿淘宝信用评价实例(附源码)
2015/11/26 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
2016/06/06 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
2016/12/23 Javascript
canvas实现绘制吃豆鱼效果
2017/01/12 Javascript
Bootstrap缩略图的创建方法
2017/03/22 Javascript
详解vue2.0脚手架的webpack 配置文件分析
2017/05/27 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
2018/05/22 Javascript
jQuery实现获取动态添加的标签对象示例
2018/06/28 jQuery
layui中table表头样式修改方法
2018/08/15 Javascript
webuploader实现上传图片到服务器功能
2018/08/16 Javascript
js实现简单选项卡功能
2020/03/23 Javascript
详解用Webpack与Babel配置ES6开发环境
2019/03/12 Javascript
[00:32]2018DOTA2亚洲邀请赛VG出场
2018/04/03 DOTA
python和bash统计CPU利用率的方法
2015/07/10 Python
通过数据库对Django进行删除字段和删除模型的操作
2015/07/21 Python
Python实现删除当前目录下除当前脚本以外的文件和文件夹实例
2015/07/27 Python
对Python中range()函数和list的比较
2018/04/19 Python
Python实现微信好友的数据分析
2019/12/16 Python
Python hmac模块使用实例解析
2019/12/24 Python
python+selenium+Chrome options参数的使用
2020/03/18 Python
python中@contextmanager实例用法
2021/02/07 Python
Trip.com香港网站:Ctrip携程旗下,全球最大的网上旅游社之一
2016/08/01 全球购物
全球酒店预订网站:Hotels.com
2016/08/10 全球购物
师范生个人推荐信
2013/11/29 职场文书
儿媳婚宴答谢词
2014/01/14 职场文书
学习十八大宣传标语
2014/10/09 职场文书
优秀党员先进材料
2014/12/18 职场文书
Win11 Build 22000.51版本文件资源管理器“命令栏”和上下文菜单有什么新变化?
2021/11/21 数码科技