摘要：使用自定义开篇在开发的中我们经常会使用一些的框架来进行布局，特别是使用它自适应的效果，可以节省我们很多的精力，把注意力放在逻辑的实现上面，这也是优秀框架的天然优势，解放你的双手，放飞吧哈哈开个玩笑了。。。
APICloud使用Aui自定义Toast 开篇
在H5开发的app中我们经常会使用一些ui的框架来进行布局，特别是使用它自适应的效果，可以节省我们很多的精力，把注意力放在逻辑的实现上面，这也是优秀框架的天然优势，解放你的双手，放飞吧！
哈哈 开个玩笑了。。。咳咳 开始说正事
在一个H5 APP的开发中我遇到了一个需求，在登录和关联企业中需要显示如下的toast提示框：
1、登录提示 2、关联企业的提示 3、AuI官方提供的样式
简直就是丑、丑、丑，这能和我们的需求关联上吗？下面我们来看看吧
通过官方的文档和源代码我们可以看有两个相同的特点，文字和图标是支持更改的，那么样式的问题，不就是覆盖吗？对吧，是不是感觉不可能发生，或许可以呢？just do it
1、调用界面引入aui-toast.js和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: "",
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
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/99800.html
摘要：使用自定义开篇在开发的中我们经常会使用一些的框架来进行布局，特别是使用它自适应的效果，可以节省我们很多的精力，把注意力放在逻辑的实现上面，这也是优秀框架的天然优势，解放你的双手，放飞吧哈哈开个玩笑了。。。 APICloud使用Aui自定义Toast 开篇 在H5开发的app中我们经常会使用一些ui的框架来进行布局，特别是使用它自适应的效果，可以节省我们很多的精力，把注意力放在逻辑的实现...
摘要：使用自定义开篇在开发的中我们经常会使用一些的框架来进行布局，特别是使用它自适应的效果，可以节省我们很多的精力，把注意力放在逻辑的实现上面，这也是优秀框架的天然优势，解放你的双手，放飞吧哈哈开个玩笑了。。。 APICloud使用Aui自定义Toast 开篇 在H5开发的app中我们经常会使用一些ui的框架来进行布局，特别是使用它自适应的效果，可以节省我们很多的精力，把注意力放在逻辑的实现...
摘要：上一篇文章中我们已经实现了评论的发布功能，现在要实现回复评论的功能，，首先呢，要知道你回复的是哪一条评论，所以我们这里要或得评论的，当点击评论的时候实现评论的回复，这里用到，把该方法放到中，这里叫做，然后在里面的里面定义一个参数，把赋给的值 上一篇文章中我们已经实现了评论的发布功能，现在要实现回复评论的功能，，首先呢，要知道你回复的是哪一条评论，所以我们这里要或得评论的id，当点击评论...
阅读 963·2021-11-22 13:52
阅读 901·2019-08-30 15:44
阅读 554·2019-08-30 15:43
阅读 2403·2019-08-30 12:52
阅读 3453·2019-08-29 16:16
阅读 613·2019-08-29 13:05
阅读 2925·2019-08-26 18:36
阅读 1913·2019-08-26 13:46
