APICloud使用Aui自定义Toast。在H5开发的app中，我们经常会用到一些ui框架来进行布局，尤其是利用它的自适应效果，可以为我们节省不少精力。专注于逻辑的实现，这也是优秀框架的天然优势，解放双手，放飞自我！哈哈开玩笑的。..咳咳，开始说业务1.需求在开发一个H5APP的过程中，遇到一个需求，需要在登录和关联企业中显示如下toast提示框：1.登录提示2.关联企业提示3.AuI官方提供的风格简直就是丑丑丑陋，这能和我们的需求有关吗？下面我们一起来看看吧。2、复制Aui的风格通过官方文档和源码可以看出有两个相同的特点。可以更改文本和图标。那么风格的问题是不是覆盖了？对啊，是不是感觉不可能，也许可以？就去做吧1。调用接口引入aui-toast.js和aui.css参考自己的实际项目即可，这一步是必须的，否则下面2.重写CSSstyle在需要提示框的界面上，直接覆盖下面的css样式，这样我们页面中的css样式就可以直接覆盖aui.css的样式/*toaststyleoverrideWrite*/.aui-toast{left:22.5%;//提示框的定位width:20em;//提示框颜色的长度：rgba(0,0,0,0.7);//提示框背景文字颜色：#ffffff;//提示框背景min-height:4em;//最小高度z-index:9;//提示框的层叠效果，类似蒙版的效果}上面的样式基本不需要修改，直接使用即可。背景和文字的风格取决于项目。3.自定义显示图标、内容和显示时间。为了实现随时可以使用，我把它放在一个工具方法中，以备后用。详情见下面代码/***调出自定义显示图标、内容和显示时间*@param{*}title标题提示信息*@param{*}time提示时间，单位毫秒*@param{*}iconfontUrlicon*/functioncustomToast(title,time,iconfontUrl){//使用aui弹窗vartoast=newauiToast({});//创建div设置遮罩效果，添加auimask遮罩样式vartostdiv=document.createElement("div");tostdiv.classList.add("aui-mask");tostdiv.classList.add("aui-mask-in");document.body.appendChild(tostdiv);//自定义弹窗内容toast.custom({title:title,html:'',时长:时间,});//设置弹窗和遮罩的显示时间setTimeout(function(){tostdiv.classList.remove("aui-mask");tostdiv.classList.remove("aui-mask-in");toast.hide();},time);}实现mask的类样式在aui.css中可以找到，直接ctrl+f搜索就可以看到4.调用写好的工具可以直接在界面中使用介绍写的工具，一行代码就够了。customToast(ret['result'],2000,'../../../image/gantan.png');OKtoopen调用接口触发方法，就可以看到你想要的样式了。整个样式定义好了，就可以开始后续的业务了。话不多说，继续码字……如果真的对你有帮助，那么恭喜你，你的需求可能已经得到解决December7,201812:53PM
