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

所属分类： JQ特效 UI 工具提示

查看演示立即下载

插件描述：平时项目用的到的组件就是一些交互类型的消息提示组件，因用ui框架太重，所以自己琢磨了一些简单常用的组件！供大家一起学习

更新时间：2018/10/17 下午2:20:54

更新说明：修复移动端消息提示位置移动问题

更新时间：2018/8/28 18:03:00

更新说明：重新封装js，使代码不容易冲突。

更新时间：2018/7/26 下午4:12:24

更新说明：动画优化

更新时间：2018/6/1 下午3:59:57

更新说明：调整弹层绑定的点击事件

更新时间：2018/3/5 下午3:30:20

更新说明：修复部分bug

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

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

wu-ui.js 末尾声明

1	`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} 可不填，失败页面显示的文字

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： canvas图片在线剪裁并下载
下一个特效： jQuery手机端滑动盒子（修改版）