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. Android开发 sharesdk分享微信/朋友圈的时候只显示文字,不显示链接

    问题:分享的时候只将分享的content分享出去了,连标题及链接都没有分享出去. 原因:没有配置image导致. 解决办法: 在  showShare 方法里面添加配置: if(ImageUrlOrP ...

  2. SpringMVC深度探险(四) —— SpringMVC核心配置文件详解

    在上一篇文章中,我们从DispatcherServlet谈起,最终为读者详细分析了SpringMVC的初始化主线的全部过程.整个初始化主线的研究,其实始终围绕着DispatcherServlet.We ...

  3. React Native常用第三方组件汇总--史上最全[转]

    本文出处: http://blog.csdn.net/chichengjunma/article/details/52920137 React Native 项目常用第三方组件汇总: react-na ...

  4. Html5學習重點清單

    SVG webSQL 數據庫 SSE 服務推送 MathML 基於xml語法 Web 存储 webSockets通信 canvas 畫布操作 音頻和視頻 地理位置 Geolocation API We ...

  5. JavaScript 作用域链解析

    JavaScript 中有 Scope( 作用域 ) , Scope chain( 作用域链 ) , Execute context( 执行上下文 ) , Active Object ( 活动对象 ) ...

  6. Oracle 11g 数据库 shutdown 后立即执行 startup mount 报错的解决办法

    最新文章:Virson's Blog 今天在配置Goldengate时Capture进程提示未开启归档日志,然后立即用sys用户登录orcl数据库,然后执行了“shutdown immediate”命 ...

  7. Git安装遇到的问题fatal: Could not read from remote repository.的解决办法

    转自:https://blog.csdn.net/huahua78/article/details/52330792 查看远端地址 git remote –v 查看配置 git config --li ...

  8. Android wifi powersave

    使用高通平台的查看power save的功能. 一般是控制WCNSS_qcom_cfg.ini文件的两个参数gEnableBmps,gEnableImps. BMPS: Beacon mode pow ...

  9. JAR 文件格式提供了许多优势和功能

    JAR 文件格式提供了许多优势和功能,其中很多是传统的压缩格式如 ZIP 或者 RAR 所没有提供的.它们包括: 安全性 可以对 JAR 文件内容加上数字化签名.这样,能够识别签名的工具就可以有选择地 ...

  10. CorelDRAW X7绘制可爱的卡通动漫多啦A梦

    今天小编为大家分享CorelDRAW X7绘制可爱的卡通动漫多啦A梦方法,教程绘制出来的哆啦A梦非常可爱,适合新手来学习,推荐过来,来看看吧! 1.新建文件 新建A4大小横向画布,双击“矩形工具”绘制 ...