vux 全局使用 loading / toast / alert
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的更多相关文章
- Atitit. Toast alert loading js控件 atiToast v2新特性
Atitit. Toast alert loading js控件 atiToast v2新特性 1. 连续多个txt追加的原理 var txt = document.createElement(& ...
- vue2.0 仿手机新闻站(五)全局的 loading 组件
1.组件结构 index.js const LoadingComponent = require('./Loading.vue') const loading = { install: functio ...
- Vuejs自定义全局组件--loading
不管是使用框架,还是不使用任何的框架,我们都不可避免的需要与“加载中……”打交道,刚刚学习了Vuejs自定义组件的写法,就现学现卖,介绍一下吧! 先看一下目录结构,一般情况下,每一个组件都新建一个新的 ...
- vux 全局注册组件
背景:调试better-scroll的时候进行封装,作为组件来调用: 希望:全局注册组件: 1,在src的main.js下: 这样就可以用了:
- Vux项目搭建
1.快速搭建项目模板 因为项目使用vux,所以推荐使用vux官网的airyland/vux2 模板,vue-cli工具是vue项目的搭建脚手架 默认为 webpack2 模板,如果你需要使用webpa ...
- vue2.0 + vux 项目搭建
1.快速搭建项目模板 因为项目使用vux,所以推荐使用vux官网的airyland/vux2 模板,vue-cli工具是vue项目的搭建脚手架 默认为 webpack2 模板,如果你需要使用webpa ...
- ajax请求加全局loading , 个别特殊请求不显示loading
项目中,请求开始前加载loading遮罩层,请求结束关闭遮罩,一般都会加在全局中,但有个别请求不需要加全局loading 的话,这时候就需要对这些请求进行配置 全局加loading: ; functi ...
- 如何优雅的使用vue+vux开发app -03
如何优雅的使用vue+vux开发app -03 还是一个错误的示范,但是离优雅差的不远了... <!DOCTYPE html> <html> <head> < ...
- 如何优雅的使用vue+vux开发app -02
如何优雅的使用vue+vux开发app -02 很明显这又是一个错误的示范,请勿模仿 使用动态组件实现保留状态的路由 <!DOCTYPE html> <html> <he ...
随机推荐
- json 存 window.localStorage.setItem('hideColums',hideArr);
onColumnSwitch:function(row, $element){ //JSON.parse() var showColumns=$('#table').bootstrapTable('g ...
- CAD使用SetxDataLong写数据(com接口)
主要用到函数说明: MxDrawEntity::SetxDataLong 写一个long扩展数据,详细说明如下: 参数 说明 [in] BSTR val 字符串值 szAppName 扩展数据名称 n ...
- vue工程化引入组件模板
vue脚手架搭建好项目后,组件间的引用通过components import bannerComponent from './banner' export default { data(){ retu ...
- java实现搜索文件夹中所有文件包含的关键字的文件路径(递归搜索)
import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import java.io ...
- WebDriver的多浏览器测试的浏览器驱动程序
1.在使用IE浏览器进行WebDriver自动化测试之前,需要从http://docs.seleniumhq.org/download/网站上下载一个WebDriver链接IE浏览器的驱动程序,文件名 ...
- ERROR 1133 (42000): Can't find any matching row in the user table
环境:操作系统:Redhat 7.5 x86-64 数据库版本MySQL 5.7.25 现象:ERROR 1133 (42000): Can't find any matching row in th ...
- qrcode.js
(function(r){r.fn.qrcode=function(h){var s;function u(a){this.mode=s;this.data=a}function o(a,c){thi ...
- 排序算法小结:C++实现
#include<vector> #include<iostream> //排序算法的稳定性:对于相同的关键字,排序之前的位置和排序之后的位置相同,则称为稳定排序,否则不稳定排 ...
- scrapy实现全站抓取数据
1. scrapy.CrawlSpider scrapy框架提供了多种类型的spider,大致分为两类,一类为基本spider(scrapy.Spider),另一类为通用spider(scrapy.s ...
- C语言学习4
C/C++语言五大内存分区:堆.栈.自由存储区.全局/静态存储区和常量存储区 栈:就是那些由编译器在需要的时候分配,在不需要的时候自动清楚的存储区,里面的变量通常是全局变量.函数参数等. 堆:就是那些 ...