APICloud使用Aui自定义Toast

2018-12-07 admin

开篇

在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

原文链接:https://segmentfault.com/a/1190000017295184

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-47559.html

文章标题: APICloud使用Aui自定义Toast

相关文章
vue使用watch 观察路由变化,重新获取内容
问题背景: 点击用户头像 =&gt; 进入用户个人中心,在用户个人中心里点击其他用户的头像,我希望显示被点击用户的个人中心,但只看到了路由参数在发生变化,页面内容并没有更新。如图: 页面代码如下: &lt;script&gt; exp...
2017-03-13
Bootstrap table简单使用总结
最近接触一个很棒的插件,Bootstrap table没做过前端的表示对table的印象还只停留在html的table标签那一套,用过bootstrap table之后不得不说真的很实用。 构造方式 1 、HTML &lt;div clas...
2017-03-17
vue-awesome-swiper的使用以及API整理
一、先说一个看关于vue-awesome-swiper的一个坑 vue项目的package.json中显示的&lt;span style=“color: orange;”&gt;“vue-awesome-swiper”: “^2.5.4”&...
2018-04-26
如何使用JavaScript
一、应用&lt;script&gt;标签加入JavaScript 任何脚本语言均可以通过&lt;script&gt;…&lt;/script&gt;标记对加入到HTML代码中(即是加入到网页文档&lt;html&gt;…&lt;/html&...
2015-11-12
使用 Protocol Buffers 代替 JSON 的五个原因
在 Ruby 和 Rails 开发者中,面向服务 (Service-Oriented) 架构有一个当之无愧的名声,它是一个缓解程序规模恶性增长的一个强有力的途径,可在大量应用程序中提取关注点。这些新生小巧的服务通常继续使用 Rails 或 ...
2016-01-13
ionic2 tabs 图标自定义实例
一、准备资源 tabs icon 的svg格式的矢量图片 二、生成字体样式文件 打开icoMoon网站去制作字体文件。 三、使用字体文件 解压下载的文件,将其中的fonts文件夹拷贝到ionic2项目的src/assest目录下。并...
2017-03-13
ajax教程之ajax使用Http请求
ajax中是如何让使用http请求的呢? 在传统的JS编程中,如果您希望从服务器上的文件或数据库中得到任何的信息,或者向服务器发送信息的话,就必须利用一个 HTML 表单向服务器 GET 或 POST 数据。而用户则需要单击“提交”按钮来发...
2015-11-12
js使用split函数按照多个字符对字符串进行分割的方法
本文实例讲述了js使用split函数按照多个字符对字符串进行分割的方法。分享给大家供大家参考。具体分析如下: js中的split()函数可以对字符串按照指定的符号进行分割,但是如果字符串中存在多个分割符号,js的split()函数是否还可以...
2017-03-21
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
按照正常的产品逻辑,我们在进行页面切换时滚动条应该是在页面顶部的,可是。。。在使用vue-router进行页面切换时,发现滚动条所处的位置被自动记录了下来,且在另一个组件内定义的滚动监听事件仍会运行,着实吃了一大惊。。。 说说我的破解方法:...
2017-03-13
[翻译]基于Webpack4使用懒加载分离打包React代码
原文地址:https://engineering.innovid.com/code-splitting-using-lazy-loading-with-react-redux-typescript-and-webpack-4-3ec601...
2018-03-11
回到顶部