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. parsley.js正确使用姿势

    1.第一式 当然要先引用:parsley.js 2.第二式 页面中定义需要使用自定义校验,注意红色的地方,必须要使用小写,重要的问题说三遍,小写,小写 <form class="for ...

  2. codeforces_D. Social Circles

    http://codeforces.com/contest/1060/problem/D 题意: n个客人,每个客人希望自己左边空li个座位,右边空ri个座位,可以形成任意个圆,问最少多少个座位. 思 ...

  3. snowflake机器标识自动绑定

    首先附上snowflake源码 package com.yunyihenkey.common.idworker; /** * Twitter_Snowflake<br> * SnowFla ...

  4. oracle将一个字段拆分成多个值 (regexp_substr函数)

    select regexp_substr(p.attributename, '[^,]+',1,level) c1from tablename p connect by level <= len ...

  5. promise的简单使用

    var p = new Promise(function (resolve,reject) { /*setTimeout(function () { resolve('success') },3000 ...

  6. String 工具类

    package com.mytripod.util; import sun.rmi.runtime.Log; import java.io.UnsupportedEncodingException; ...

  7. 微信小程序 设置计时器(setInterval)、清除计时器(clearInterval)

    1.wxml代码 <!--index.wxml--> <view class="container"> <button type='primary' ...

  8. 树莓派 -- 输入设备驱动 (key) 续1

    测试 安装 input-utils pi@raspberrypi:~ $ sudo apt-get install input-utils Reading package lists... Done ...

  9. assert.deepEqual()

    assert.deepEqual(actual, expected[, message]) 深度比较 actual 和 expected 参数,使用比较运算符(==)比较原始值. 只考虑可枚举的&qu ...

  10. Memcache 分布式存储 【一致性Hash】crc32

    class memcacheHash { private $_node = array(); private $_nodeData = array(); private $_keyNode = 0; ...