1.入口文件

main.js

import { LoadingPlugin, ToastPlugin, AlertPlugin } from 'vux'
Vue.use(LoadingPlugin);
Vue.use(ToastPlugin,{position: 'top'});
Vue.use(AlertPlugin);

2.使用

// LoadingPlugin
// 显示
this.$vux.loading.show({
text: '加载中...'
})
// 隐藏
this.$vux.loading.hide() // ToastPlugin
// 显示
this.$vux.toast.show({
text: '加载中...'
})
// 显示文字
this.$vux.toast.text('hello', 'top')
// 隐藏
this.$vux.toast.hide() // AlertPlugin
// 显示
this.$vux.alert.show({
title: 'Vux is Cool',
content: 'Do you agree?',
onShow () {
console.log('Plugin: I\'m showing')
},
onHide () {
console.log('Plugin: I\'m hiding')
}
})
// 隐藏
this.$vux.alert.hide()

.

vux 全局使用 loading / toast / alert的更多相关文章

  1. Atitit. Toast alert loading js控件   atiToast v2新特性

    Atitit. Toast alert loading js控件   atiToast v2新特性 1. 连续多个txt追加的原理 var txt = document.createElement(& ...

  2. vue2.0 仿手机新闻站(五)全局的 loading 组件

    1.组件结构 index.js const LoadingComponent = require('./Loading.vue') const loading = { install: functio ...

  3. Vuejs自定义全局组件--loading

    不管是使用框架,还是不使用任何的框架,我们都不可避免的需要与“加载中……”打交道,刚刚学习了Vuejs自定义组件的写法,就现学现卖,介绍一下吧! 先看一下目录结构,一般情况下,每一个组件都新建一个新的 ...

  4. vux 全局注册组件

    背景:调试better-scroll的时候进行封装,作为组件来调用: 希望:全局注册组件: 1,在src的main.js下: 这样就可以用了:

  5. Vux项目搭建

    1.快速搭建项目模板 因为项目使用vux,所以推荐使用vux官网的airyland/vux2 模板,vue-cli工具是vue项目的搭建脚手架 默认为 webpack2 模板,如果你需要使用webpa ...

  6. vue2.0 + vux 项目搭建

    1.快速搭建项目模板 因为项目使用vux,所以推荐使用vux官网的airyland/vux2 模板,vue-cli工具是vue项目的搭建脚手架 默认为 webpack2 模板,如果你需要使用webpa ...

  7. ajax请求加全局loading , 个别特殊请求不显示loading

    项目中,请求开始前加载loading遮罩层,请求结束关闭遮罩,一般都会加在全局中,但有个别请求不需要加全局loading 的话,这时候就需要对这些请求进行配置 全局加loading: ; functi ...

  8. 如何优雅的使用vue+vux开发app -03

    如何优雅的使用vue+vux开发app -03 还是一个错误的示范,但是离优雅差的不远了... <!DOCTYPE html> <html> <head> < ...

  9. 如何优雅的使用vue+vux开发app -02

    如何优雅的使用vue+vux开发app -02 很明显这又是一个错误的示范,请勿模仿 使用动态组件实现保留状态的路由 <!DOCTYPE html> <html> <he ...

随机推荐

  1. iOS开发 数据缓存-数据库

    iOS中数据存储方式 Plist(NSArray\NSDictionary) Preference(偏好设置\NSUserDefaults) NSCoding (NSKeyedArchiver\NSk ...

  2. codeforces_1066_B.Heaters

    题意:一个数组只含有0或1,1表示该元素可以覆盖其自身.左边r-1个元素和右边r-1个元素,问最少保留多少个1元素可以覆盖整个数组. 思路:一个指针指向当前未被覆盖的最左边的元素下标,每次找离它最远且 ...

  3. jquery 点击切换div

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. C#通过post发送接收数据流

    发送数据流方法 /// <summary> /// /// </summary> /// <param name="url">目标url< ...

  5. Go语言 之产生随机数

    package main import ( "fmt" "math/rand" "strconv" "time" ) f ...

  6. ansible相关说明

    2.ansible相关说明 2.1.ansible相关命令 ansible:定义并运行简单任务,主要执行ad-hoc命令 ansible-config:查看.编辑.管理ansible配置 ansibl ...

  7. linux下设置python3.x为默认版本

    rm /usr/bin/python ln -s /usr/local/bin/python3.x /usr/bin/python sybomlic 安装目录 系统目录

  8. 多线程之Java中的等待唤醒机制

    多线程的问题中的经典问题是生产者和消费者的问题,就是如何让线程有序的进行执行,获取CPU执行时间片的过程是随机的,如何能够让线程有序的进行,Java中提供了等待唤醒机制很好的解决了这个问题! 生产者消 ...

  9. oracle调用存储过程和函数返回结果集

    在程序开发中,常用到返回结果集的存储过程,这个在mysql和sql server 里比较好处理,直接返回查询结果就可以了,但在oracle里面 要 out 出去,就多了一个步骤,对于不熟悉的兄弟们还得 ...

  10. android中ListView的定位:使用setSelectionFromTop

    如果一个ListView太长,有时我们希望ListView在从其他界面返回的时候能够恢复上次查看的位置,这就涉及到ListView的定位问题: 解决的办法如下: 1 2 3 4 5 6 7 // 保存 ...