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. Jna & twain

    参考海康威视Java版示例(采用Jna实现) 获得win32原生窗口句柄:HWND hwnd = new HWND(Native.getComponentPointer(panelRealplay)) ...

  2. PHP 调试利器之 PHPDBG

    简介 PHPDBG是一个PHP的SAPI模块,可以在不用修改代码和不影响性能的情况下控制PHP的运行环境. PHPDBG的目标是成为一个轻量级.强大.易用的PHP调试平台.可以在PHP5.4和之上版本 ...

  3. 微信小程序——button, swiper等默认样式更改

    微信开发工具里面,无法展示编译后的一些样式,如::before,::after这些伪类.有时候我们需要修改一些组件的默认样式会略感到麻烦,因为不知道是通过哪里控制的. 我就平常遇到的一些修改默认样式, ...

  4. Java知多少(17)强调一下编程风格

    讲完了Java的基础语法,大家就可以编写简单的程序代码了,这里有必要强调一下编程风格. 代码风格虽然不影响程序的运行,但对程序的可读性却非常重要.自己编写的程序要让别人看懂,首先在排版方面要非常注意. ...

  5. struts2+hibernate(分页实现)

    //Dao类中实现了list集合和pagetotal方法 package zjf.strhib.Dao; import java.util.ArrayList; import java.util.Li ...

  6. javascript验证键盘keycode

    document.onkeyup = function(event){ var event = event || window.event; alert(event.keyCode); }

  7. python进行数据分析----线性回归

    线性回归分析: 方法: import statsmodels.api as sm import pandas as pd from patsy.highlevel import dmatrices - ...

  8. JAR 归档文件是与平台无关的文件格式

    JAR(Java Archive,Java 归档文件)是与平台无关的文件格式,它允许将许多文件组合成一个压缩文件,可以使用Java软件打开. 为 J2EE 应用程序创建的 JAR 文件是 EAR 文件 ...

  9. python_smtplib

    import smtplib smtpserver = 'smtp.qq.com' fromaddr = 'fromaddr@qq.com' toaddrs = 'toaddr@qq.com' msg ...

  10. dendrogram 和 barplot 的组合

    示例代码: data <- mtcars[1:10, ] hc <- hclust(dist(data)) hcd <- as.dendrogram(hc) par(mfrow = ...