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. (转)淘淘商城系列——发布dubbo服务

    http://blog.csdn.net/yerenyuan_pku/article/details/72758639 Dubbo采用全Spring配置方式,透明化接入应用,对应用没有任何API侵入, ...

  2. hibernate 批量抓取

    使用场景: 是查询出来一个集合,然后又查询每个集合对象中的集合.使用set标签中的batch-size属性实现. 数据库中只有5个区道信息: 设置batch-size=”5”,执行的查询语句如下: 而 ...

  3. Flask框架 之数据库扩展Flask-SQLAlchemy

    一.安装扩展 pip install flask-sqlalchemy pip install flask-mysqldb 二.SQLAlchemy 常用的SQLAlchemy字段类型 类型名 pyt ...

  4. Perl语言入门:第六章习题:处理用户所指定的名字并汇报相应的姓。

    37 print "\n----------------------------------_exercise_6_1--------------------------\n";  ...

  5. fastclick.js插件使用

    引入插件步骤 ①在HTML页面中添加  <script type='application/javascript' src='/path/to/fastclick.js'></scr ...

  6. Python 字符编码-文件处理

    .read #读取所有内容,光标移动到文件末尾.readable #判断文件是否可读.readline #读取一行内容,光标移动到第二行首部.readlines #读取每一行内容,存放于列表中.wri ...

  7. C#基础学习(一)

    ---恢复内容开始--- 1.最近被安排去做C#开发,然后开始一连串的看文档·看视屏,发现学C#给自己补了很多基础,C#每个函数变量什么都要先声名,而python可以直接定义: 一.数据类型 1.整数 ...

  8. shell脚本、if语句、for循环语句

    shell在shell脚本中,如果用户不输入东西,系统不自动退出,this is a bug!文件测试语句:-d -f -r -w -x -e逻辑测试语句:“&&”与(同时满足) “| ...

  9. CSS3 @font-face的url要添加?#iefix的原因

    转至:https://github.com/CSSLint/csslint/wiki/Bulletproof-font-face When using @font-face to declare mu ...

  10. Python之爬虫-酷6视频

    Python之爬虫-酷6视频 #!/usr/bin/env python # -*- coding:utf-8 -*- import re import requests response = req ...