简洁的vue移动端消息提示插件可用(原创)

所属分类:UI-对话框,弹出层,工具提示

 1856  27  查看评论 (0)
简洁的vue移动端消息提示插件可用(原创) ie兼容11

简洁好用的ui提示组件,适用移动端。

 发布时间:2018-2-6 0:56

wu-ui.js 末尾声明

 var wu = new Wu()

隐藏loading或toast等

wu.hideToast()
wu.showLoadingBg()    // 白色背景满屏的loading
/* 显示Toast  消息提示 */ 
wu.showToast(object) // @param {object} 
wu.showToast({
	title: '操作成功',
	mask: false,                //是否可以操作dom
	icon: 'icon-success',   // icon-success | icon-error | icon-info
	duration: 3000
});

显示头部弹出消息提示

wu.showMessage(object) // @param {object} 

wu.showMessage({
	title: "输入错误",
	backgroundColor: 'red',   //背景颜色
	duration: 3000
});

显示弹出窗口 Dialog 

wu.showDialog(object) // @param {object} 
wu.showDialog({
	title: 'Hello Wu-ui',
	content: '欢迎使用Wu-ui',
	showCancel: true,       //是否显示取消按钮
        showInput: false,        //是否显示输入框,如果为true则content会隐藏
	success: function(res) {
		if(res.value == "confirm") {
			wu.showToast({
			        title: '点击了确定',
			        duration: 2500
		         })
		}
		if(res.value == "cancel") {
			wu.showToast({
			title: '你取消了',
			duration: 1500
	       })
	    }
	}
})

显示底部弹出操作菜单

wu.showAction(object) // @param {object} 
wu.showAction({
    title: '示例标题',
    deleteText: '', // string - 点击删除时弹出框的确认消息
    menuArray: [{
            title: '示例菜单一',
            value: 'menu1',
            color: ''
        },
        {
            title: '示例菜单二',
            value: 'menu2',
            color: ''
        },
        {
            title: 'Delete',
            value: 'delete',
            color: 'red'
        } //如果是删除  value 必须是 "delete"
    ],
    success: function(res) {
        if (res.value == "delete") {
            wu.showToast({
                title: "已删除",
                duration: 1500
            })
        } else {
            wu.showToast({
                title: res.title
            })
        }
    }
})

/* 网络请求超时或失败提示 */ 

wu.showError(string) // @param {string} 可不填,失败页面显示的文字
相关插件-对话框,弹出层,工具提示

讨论这个项目(0)回答他人问题或分享插件使用方法奖励jQ币

取消回复