更新时间: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
发布时间: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} 可不填,失败页面显示的文字
在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()