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 ...
随机推荐
- Jna & twain
参考海康威视Java版示例(采用Jna实现) 获得win32原生窗口句柄:HWND hwnd = new HWND(Native.getComponentPointer(panelRealplay)) ...
- Vue路由学习笔记
Vue路由大致分为6个步骤: 1.引用vue-router <script src="js/vue-router.js"></script> 2.安装插件 ...
- Servlet、Filter、Listener总结
servlet规范提供了一组标准的servlet api.servlet容器就是servlet规范的实现. 1.In Action (1)写一个类继承HttpServlet: (2)重写其中的方法. ...
- 经典ajax 状态响应图
- python 查看目录下所有目录和文件
python查看目录下所有的子目录和子文件 python递归遍历目录结构 我喜欢第一种 方法1 import json, os def list_dir(path, res): for i in os ...
- Android ListView实现单击item出现删除按钮以及滑动出现删除按钮
我自己一个人弄的公司的产品客户端,所以还是想记录下来以免忘记或者丢失... 在我的上一篇博文(点击打开链接)是一个文件管理的东西,基础组件也是ListView所以在此只是改动一下而已. 单击: 点击出 ...
- 第三百八十六节,Django+Xadmin打造上线标准的在线教育平台—HTML母版继承
第三百八十六节,Django+Xadmin打造上线标准的在线教育平台—HTML母版继承 母板-子板-母板继承 母板继承就是访问的页面继承一个母板,将访问页面的内容引入到母板里指定的地方,组合成一个新页 ...
- Maven目标
Maven主要目标是提供给开发人员: 项目是可重复使用,易维护,更容易理解的一个综合模型. 插件或交互的工具,这种声明性的模式. Maven项目的结构和内容在一个XML文件中声明,pom.xml 项目 ...
- 在Eclipse中设置进行JNI的头文件编译方法(转 http://blog.csdn.net/mirkerson/article/details/17187109)
这两天在搞NDK开发,JNI的头文件进行编译的时候,要跑到对应的class文件路径下(通常是工程的bin目录),进行编译生成,很是不便,也容易出错,所以考虑在Eclipse中作为外部工具引入,所以便查 ...
- mongodb 学习1
基本概念 MongoDB是一个高性能,开源,无模式的文档型数据库,是当前NoSql数据库中比较热门的一种.它在许多场景下可用于替代传统的关系型数据库或键/值存储方式( 文件存储格式为BSON(一种JS ...