vux 使用 loading 组件
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 组件的更多相关文章
- [Loading Component]Loading组件的v-model设计是否不合理?
vue在2.4.2版本中给computed里的属性加了限制,详见assigning to a computed property without setter does not fail 项目将vue ...
- ReactJS实践(一)—— FrozenUI React化之Loading组件
在前面我们通过四篇文章入门了React的大部分主要API,现在则开始进入实践环节. 实践系列的开篇打算拿我司的FrozenUI来试验,将其部分UI组件进行React化,作为第一篇实践文章,将以较简单的 ...
- Vue系列:在vux的popup组件中使用百度地图遇到显示不全的问题
问题描述: 将百度地图封装成一个独立的组件BMapComponent,具体见 Vue系列:如何将百度地图包装成Vue的组件(http://www.cnblogs.com/strinkbug/p/576 ...
- Vue 封装的loading组件
<template> <div class="loadEffect"> <span></span> <span>< ...
- React Native封装Toast与加载Loading组件
React Native开发封装Toast与加载Loading组件 在App开发中,我们避免不了使用的两个组件,一个Toast,一个网络加载Loading,在RN开发中,也是一样,React Nati ...
- Angular23 loading组件、路由配置、子路由配置、路由懒加载配置
1 需求 由于Angular是单页面的应用,所以在进行数据刷新是进行的局部刷新:在进行数据刷新时从浏览器发出请求到后台响应数据是有时间延迟的,所以在这段时间就需要进行遮罩处理来提示用户系统正在请求数据 ...
- vue2.0 仿手机新闻站(五)全局的 loading 组件
1.组件结构 index.js const LoadingComponent = require('./Loading.vue') const loading = { install: functio ...
- 小程序使用wepy框架自定义loading组件
1:定义组 <template> <view class="app-loading-container" style="{{options.cssTex ...
- 微信小程序把玩(二十五)loading组件
原文:微信小程序把玩(二十五)loading组件 loading通常使用在请求网络数据时的一种方式,通过hidden属性设置显示与否 主要属性: wxml <!----> <butt ...
随机推荐
- RMySQL数据库编程指南
R语言作为统计学一门语言,一直在小众领域闪耀着光芒.直到大数据的爆发,R语言变成了一门炙手可热的数据分析的利器.随着越来越多的工程背景的人的加入,R语言的社区在迅速扩大成长.现在已不仅仅是统计领域,教 ...
- 【转】MySQL count(*)速度慢优化
select count(*)是MySQL中用于统计记录行数最常用的方法. count方法可以返回表内精确的行数,每执行一次都会进行一次全表扫描, 以避免由于其他连接进行delete和insert引起 ...
- 树莓派3 U盘启动 配置 & 即 MSD启动 总结
树莓派3添加了一个新特性:允许USB启动.现在我们既可以从SD卡启动,也可以从USB启动.USB设备可以是U盘,带USB适配器的SSD硬盘,甚至是移动硬盘. 本文介绍怎么从U盘启动树莓派3. 1. ...
- C++ 模板 template
#include <iostream> using namespace std; /* 模板的作用: 1. 不用声明类型, 传什么进来就是什么类型, 返回也是什么类型 2. 方法封装起来, ...
- linux 日志查询
tail -n 400 logname | grep "AAA" grep 简单使用 1.把要查询的行写到文本里面去: grep WXCP IC.NotifyIndexServer ...
- JUnit断言
在本节中,我们将介绍一些断言方法.所有这些方法都受到 Assert 类扩展了java.lang.Object类并为它们提供编写测试,以便检测故障.下表中有一种最常用的断言方法的更详细的解释. 断言 描 ...
- 命令查询职责分离模式(Command Query Responsibility Segregation,CQRS)
浅谈命令查询职责分离(CQRS)模式 CQRS架构简介 对CQRS的一次批判性思考
- DOS批处理基础
1. echo 和 @ 回显命令 @ #表示不显示@后面的命令 echo off #从下一行开始关闭回显 @echo off ...
- linux vi命令详解2
刚开始学着用linux,对vi命令不是很熟,在网上转接了一篇. vi编辑器是所有Unix及Linux系统下标准的编辑器,它的强大不逊色于任何最新的文本编辑器,这里只是简单地介绍一下它的用法和一小部分指 ...
- WizNote分享笔记至博客
右边的分享按钮 选中后出现如图所示 然后可以进行分享了