1)声明引入Loading

import { Loading } from 'vux'

2)在模版底部添加 组件(需要添加到 template>div 标签里)

<template>
<div>
……
<loading v-model="showLoading" :text="loadText"></loading>
</div>
</template>

3)通过控制 showLoading 变量 和 loadText 变量即可控制 Loading 组件

export default {
components: {
AjaxPlugin,
Loading
},
data () {
return {
showLoading: false,
loadText: 'Loading',
articleList: this.getArticleList(1)
}
},
methods: {
getArticleList: function (catId) {
let _this = this _this.showLoading = true htttpRequest('/api', {method: 'article.getList', 'catId': catId}, function (data) {
_this.showLoading = false
_this.articleList = data.Result.ArticleList
})
return []
}
}
}

vux 使用 loading 组件的更多相关文章

  1. [Loading Component]Loading组件的v-model设计是否不合理?

    vue在2.4.2版本中给computed里的属性加了限制,详见assigning to a computed property without setter does not fail 项目将vue ...

  2. ReactJS实践(一)—— FrozenUI React化之Loading组件

    在前面我们通过四篇文章入门了React的大部分主要API,现在则开始进入实践环节. 实践系列的开篇打算拿我司的FrozenUI来试验,将其部分UI组件进行React化,作为第一篇实践文章,将以较简单的 ...

  3. Vue系列:在vux的popup组件中使用百度地图遇到显示不全的问题

    问题描述: 将百度地图封装成一个独立的组件BMapComponent,具体见 Vue系列:如何将百度地图包装成Vue的组件(http://www.cnblogs.com/strinkbug/p/576 ...

  4. Vue 封装的loading组件

    <template> <div class="loadEffect"> <span></span> <span>< ...

  5. React Native封装Toast与加载Loading组件

    React Native开发封装Toast与加载Loading组件 在App开发中,我们避免不了使用的两个组件,一个Toast,一个网络加载Loading,在RN开发中,也是一样,React Nati ...

  6. Angular23 loading组件、路由配置、子路由配置、路由懒加载配置

    1 需求 由于Angular是单页面的应用,所以在进行数据刷新是进行的局部刷新:在进行数据刷新时从浏览器发出请求到后台响应数据是有时间延迟的,所以在这段时间就需要进行遮罩处理来提示用户系统正在请求数据 ...

  7. vue2.0 仿手机新闻站(五)全局的 loading 组件

    1.组件结构 index.js const LoadingComponent = require('./Loading.vue') const loading = { install: functio ...

  8. 小程序使用wepy框架自定义loading组件

    1:定义组 <template> <view class="app-loading-container" style="{{options.cssTex ...

  9. 微信小程序把玩(二十五)loading组件

    原文:微信小程序把玩(二十五)loading组件 loading通常使用在请求网络数据时的一种方式,通过hidden属性设置显示与否 主要属性: wxml <!----> <butt ...

随机推荐

  1. I2C上拉电阻

    在一些PCB的layout中,大家往往会看到在I2C通信的接口处,往往会接入一个4.7K的电阻,有的datasheet上面明确有要求,需要接入,有的则没有要求.   I2C接口 对于单片机来讲,有些I ...

  2. SpannableString

    http://blog.csdn.net/fengkuanghun/article/details/7904284 背景介绍 在开发应用过程中经常会遇到显示一些不同的字体风格的信息犹如默认的LockS ...

  3. soapui-使用groovy脚本执行用例请求

    import com.eviware.soapui.impl.wsdl.testcase.WsdlTestRunContext CURRENT_TESTCASE = testRunner.testCa ...

  4. Assets/FollowDestination.cs(6,13): error CS0246: The type or namespace name `NavMeshAgent' could not be found. Are you missing `UnityEngine.AI' using directive?的解决方案

    问题的出现与描述 在Unity中创建一个NPC,使它一直跟踪一个目标Destination,C#脚本代码如下,错误信息描述如下 using System.Collections; using Syst ...

  5. Eclipse中创建Maven项目失败

    Eclipse中创建Maven项目报错:Unable to create project from archetype org.apache.maven.archetypes:maven-archet ...

  6. eclipse debug 执行到断点处并没有停下,断点无效问题

    转自:http://blog.csdn.net/cuidiwhere/article/details/14434439 现象: 利用eclipse debug时,执行到断点处并没有停下.正常情况下,在 ...

  7. hihoCoder 1033: 交错和

    (1)题目描述: 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 给定一个数 x,设它十进制展从高位到低位上的数位依次是 a0, a1, ..., an - 1,定义交错 ...

  8. java.lang.IllegalArgumentException: Request header is too large 解决方案

    错误描述: java.lang.IllegalArgumentException: Request header is too large 问题分析: 请求头超过了tomcat的限值.本来post请求 ...

  9. 通过 Service 访问 Pod

    我们不应该期望 Kubernetes Pod 是健壮的,而是要假设 Pod 中的容器很可能因为各种原因发生故障而死掉.Deployment 等 controller 会通过动态创建和销毁 Pod 来保 ...

  10. TensorFlow-Python:创建空列表list与append的用法

    1.空list的创建: l = list() 或者: l = [] 2.list中元素的创建和表达 fruits = ['apple', 'banana', 'pear', 'grapes', 'pi ...