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. Navi.Soft31.Mobile框架(含下载地址)

    1概述 1.1应用场景 互联网的发展,使用基于Web的软件异军突起,目前占据着相当大的市场份额,而手机,平板电脑等移动端设备的频繁使用,使移动端的软件快速发展,逐步有超越Web软件的趋势 移动软件中, ...

  2. 安卓程序代写 网上程序代写[原]BluetoothClass详解

    一. BluetoothClass简介 1. 继承关系 public final class BluetoothClass extends Object implements Parcelable 该 ...

  3. Java注释规范整理

    Version:0.9 StartHTML:-1 EndHTML:-1 StartFragment:00000099 EndFragment:00018736 在软件开发的过程中总是强调注释的规范,但 ...

  4. 自定义python web框架

    -- Bootstrap http://www.bootcss.com/ -- Font Awesome http://fontawesome.io/ -- bxslider http://bxsli ...

  5. android wifi RSSI达到阈值自动断开

    设置wifi的RSSI达到阈值之后自动断开. wifi状态改变,会更新状态栏,在状态栏中更改. --- a/packages/SystemUI/src/com/android/systemui/sta ...

  6. SpringBoot系列十一:SpringBoot整合Restful架构(使用 RestTemplate 模版实现 Rest 服务调用、Swagger 集成、动态修改日志级别)

    声明:本文来源于MLDN培训视频的课堂笔记,写在这里只是为了方便查阅. 1.概念:SpringBoot整合Restful架构 2.背景 Spring 与 Restful 整合才是微架构的核心,虽然在整 ...

  7. lua----------------使用VS2015搭建lua开发环境的一些侥幸成功经验,

    所以本篇博文介绍在Windows平台下,使用VS2015搭建lua开发环境的一些侥幸成功经验,安装过程参考网上教程,安装过程如下(参考http://www.byjth.com/lua/33.html) ...

  8. CentOS 6.x安装配置MongoDB 3.4.x

    说明: 操作系统:CentOS 5.X 64位 IP地址:192.168.21.128 实现目的: 安装配置MongoDB数据库 具体操作: 一.关闭SElinux.配置防火墙 1.vi /etc/s ...

  9. PHP进阶。

    老手段,百度“PHP进阶” 不过,今天运气不错,搜到一个“PHP特级内容讲解”,地址是:http://wenku.baidu.com/course/view/fd8e591b6bd97f192279e ...

  10. YII2 设置session过期时间

    设置session过期时间 如何在YII里设置SESSION过期时间,而不需要在php.ini里面设置. 在protected/config/main.php里,设置: 代码如下 复制代码 'comp ...