APICloud使用Aui自定义Toast
APICloud使用Aui自定义Toast
开篇
在H5开发的app中我们经常会使用一些ui的框架来进行布局,特别是使用它自适应的效果,可以节省我们很多的精力,把注意力放在逻辑的实现上面,这也是优秀框架的天然优势,解放你的双手,放飞吧!
哈哈 开个玩笑了。。。咳咳 开始说正事
一、需求
在一个H5 APP的开发中我遇到了一个需求,在登录和关联企业中需要显示如下的toast提示框:
1、登录提示
2、关联企业的提示
3、AuI官方提供的样式
简直就是丑、丑、丑,这能和我们的需求关联上吗?下面我们来看看吧
二、复写Aui的样式
通过官方的文档和源代码我们可以看有两个相同的特点,文字和图标是支持更改的,那么样式的问题,不就是覆盖吗?对吧,是不是感觉不可能发生,或许可以呢?just do it
1、调用界面引入aui-toast.js和aui.css
<script type="text/javascript" src="../../../script/aui-toast.js"></script> <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
按照你自己的实际项目引用就好,这一步是必须的,否则后面的覆盖就无法进行了哦
2、覆写CSS样式
在需要提示框的界面上,直接覆写如下的css样式,这样我们页内的css样式就可以直接覆盖aui.css的样式
/*toast 样式覆盖重写*/ .aui-toast { left: 22.5%; // 提示框的定位 width: 20em; // 提示框的长度 color: rgba(0, 0, 0, 0.7); // 提示框文字颜色 background: #ffffff; // 提示框的背景 min-height: 4em; // 最小高度 z-index: 9; // 提示框的层叠效果,类似遮罩一样的效果 }
上面的样式基本上不需要做出修改了,可以直接使用,背景和文字的样式就看项目了
3、自定义显示的图标、内容和显示的时间
为了实现能够随时使用,我将他放在了一个工具方法中,便于后面的使用,具体见下面的代码
/** * 调用出自定义显示图标、内容和显示时间 * @param {*} title 标题 提示信息 * @param {*} time 提示时间 毫秒为单位 * @param {*} iconfontUrl 图标 */ function customToast(title, time, iconfontUrl) { // 使用aui弹窗 var toast = new auiToast({}); // 创建一个div设置遮罩的效果,添加aui遮罩的样式 var tostdiv = document.createElement("div"); tostdiv.classList.add("aui-mask"); tostdiv.classList.add("aui-mask-in"); document.body.appendChild(tostdiv); // 自定义弹窗的内容 toast.custom({ title: title, html: '<i class="aui-iconfont"><img style="margin:4px auto;" src="' + iconfontUrl + '" /></i>', duration: time, }); // 设置弹窗和遮罩的显示时间 setTimeout(function () { tostdiv.classList.remove("aui-mask"); tostdiv.classList.remove("aui-mask-in"); toast.hide(); }, time); }
实现遮罩的class样式可以在aui.css中找到,直接ctrl+f搜索就可以看到了
4、调用方式
引入写好的工具就可以直接在界面使用了,一行代码就搞定
customToast(ret['result'], 2000, '../../../image/gantan.png');
好了打开界面触发方法的调用,便可以看到自己想要的样式了
整个样式就定义完毕了,可以开始进行后面的业务了,不说了,继续撸代码了...
如果确实帮助到你了,那么恭喜,你的需求可能得到了解决。
天亮哥
December 7, 2018 12:53 PM
相关推荐
fengyeezju 2020-06-25
安辉 2020-03-01
xilove0 2020-02-01
Roka 2019-12-14
GoAheadY 2010-08-21
sgafdsg 2011-07-19
绿豆饼 2019-11-01
小仙儿 2019-10-22
我只是个程序员 2014-07-01
taiyuanwuyin 2015-03-31
未子涵 2019-09-21
FreeThinking 2019-04-16
ajaxtony 2018-12-10
tzshlyt 2019-08-20
屋顶小黑猫 2012-09-21
冰川孤辰 2019-07-01
Jemy杰 2019-07-01