UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

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

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

 48579  434  查看评论 (33)
分享到微信朋友圈
X
简洁的vue移动端消息提示插件可用(原创) ie兼容11
 查看演示  立即下载

更新时间：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 末尾声明

 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} 可不填，失败页面显示的文字
相关插件-对话框,弹出层,工具提示
查看更多

讨论这个项目（33）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    Only_xFan 0
    2020/1/9 17:39:25
    挺不错的
        你惯的啊~(ㄒ?ㄑ)/~0
        2020/1/17 11:31:07
        对对对
        你惯的啊~(ㄒ?ㄑ)/~0
        2020/1/17 11:34:53
        电动蝶阀
    回复
    半城┵ 0
    2019/12/17 11:23:51
    看着挺好，下载试试 回复
    闪烁 0
    2019/4/22 15:40:53
    情雨胗风 0
    2018/12/13 17:04:48
    我怎么用不了 export default wu 就报错
        r0
        2019/1/21 14:47:00
        https://github.com/wuruijin1996/wuui
    回复
    难顾。 0
    2018/12/6 15:01:52
    不能直接调用方法吗？
        r0
        2019/1/4 10:31:00
        直接用js引入的vue可以直接调用方法，vue-cli 里需要特殊处理的。
    回复
    kevinsun87 0
    2018/11/8 16:04:59
    r 1
    2018/10/12 10:33:09

    在vue-cli 中引入方法：
    1.在wu-ui.js 主文件末尾添加：

    export default wu;

    2.全局引用在main.js 文件添加:

    import wu from './assets/wu-ui/wu-ui'; // 把wu-ui文件夹放入assets静态

    文件夹里，然后引入

    Vue.prototype.wu = wu;  // 把wu注册到vue里

    3.调用组件

    this.wu.showLoading()
        r1
        2018/10/12 11:35:32

        第二点补充：
        app.vue 里的 style 标签里引入css：

        @import './assets/wu-ui/wu-ui.css';
        ╁奋斗吧小青年°0
        2019/9/27 11:33:23
        按照你的方法还是报错啊
    回复
    rzzdd 0
    2018/9/4 11:22:15
    苹果端使用底部弹出框跳转页面后再退回上个页面 出现bug
        r0
        2018/9/6 16:11:27
        可以详细说明一下出现的bug吗
    回复
    xuelang_wl 0
    2018/8/31 10:37:51
    很棒的插件 very good 回复
    橙浮之年 0
    2018/8/24 14:20:58
    弹出输入框，前面输入空格然后在输入内容，点击确定，无响应。
        r0
        2018/8/24 16:57:46
        弹出窗口的按钮是button 如果你没让input聚焦的话你点空格会触发button的
    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复