angular组件--tips提示功能

将组件封装起来在项目中开发很实用，之前遭遇过一次痛苦的经历，那阵子改的要吐血了。常用的组件封装起来，改公共的地方，往往多处受用。

例如：我在项目中引用 tips.text('加载中。。。',false) ；

参数设为false时，tips会一直显示，可以在请求成功后，让tips 隐藏了；参数不设置的时候，tips两秒后消失。

PS：isHide && (timeoutId = setTimeout(function() {ele.style.display = 'none'; }, 2000)); 这句困扰了好久，这是tips一直显示的原因，最后终于明白了，&&方法：当只有前面的为true,后面的才可以执行，并返回后面的值。附上篇觉得写得不错的一篇文章：

http://wenrunchang123.iteye.com/blog/1749802

module.exports = function() {angular.module('App').factory('tips', function() {var $ = angular.element;var ele = angular.element('<div id="tips"></div>')[0];var $ele = $(ele);var style = {display: 'none',padding: '5px 10px','text-align': 'center',position: 'fixed',left: '50%',transform: 'translate(-50%, -50%)','background-color': 'rgba(0,0,0,.6)',color: '#fff','z-index': '9999','border-radius': '5px'};angular.element(ele).css(style);document.body.appendChild(ele);var timeoutId = null;return {text: function(msg, isHide) {isHide = isHide !== undefined ? isHide : true;ele.style.display = 'inline-block';ele.style.bottom = '50%';ele.innerHTML = msg;clearTimeout(timeoutId);isHide && (timeoutId = setTimeout(function() {ele.style.display = 'none';}, 2000));},hide: function() {ele.style.display = 'none';},tips: function(options) {if (options.style) {for (var p in options.style) {ele.style[p] = options.style[p];}}ele.style.display = 'inline-block';ele.innerHTML = options.msg;clearTimeout(timeoutId);(options.isHide || options.isHide === undefined) && (timeoutId = setTimeout(function() {ele.style.display = 'none';}, options.timeout || 2000));}}});
};

转载于:https://www.cnblogs.com/xiaoli52qd/p/6705096.html

angular组件--tips提示功能相关推荐

新手引导页面html,网站新手引导tips提示功能开发经验分享
前几天将前端开拓者的前台页面调整为响应式网页,发现在手机端的页面布局下导航栏非常难以处理.通过多种方案的尝试与调整,最终决定将导航栏设置为超出屏幕宽度横向滚动的方式以满足布局与功能上的需要. 如上图, ...
php的toast,使用toast组件实现提示用户忘记输入用户名或密码功能
微信小程序现在越来越流行,所需要的开发功能越来越多,本文主要介绍了微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能,结合实例形式详细分析了toast组件实现消息提示功能的相关操作技巧 ...
ctk 组件创建 ui_创建可重复使用的UI组件的提示和技巧
ctk 组件创建 ui by Gabriel Colombo 加布里埃尔·科伦坡(Gabriel Colombo) 创建可重复使用的UI组件的提示和技巧 (Tips & tricks for ...
pb怎么封装com组件_从零开始构建 Angular 组件库
NG-ZORRO 组件库官网地址:Ant Design Of Angular Github地址:NG-ZORRO/ng-zorro-antd 更新:视频已上传谢亚东演讲视频_腾讯视频v.qq.co ...
element 问号提示_vue实现element表格里表头信息提示功能(推荐)
如图:在element表格操作一栏需要添加提示功能实现效果如图:鼠标浮上去弹出tips 解决方案 1.编写组件在 promptMessage.vue 文件里面实现 {{item}} export ...
Angular 组件交互
Angular 组件交互组件交互: 组件通讯,让两个或多个组件之间共享信息. 使用场景: 当某个功能在多个组件中被使用到时,可以将该特定的功能封装在一个子组件中,在子组件中处理特定的任务或工作流. ...
HarmonyOS之常用组件TextField的功能和使用
一.支持的 XML 属性 TextField 的共有 XML 属性继承自:Text. Text 的自有 XML 属性,请参考我之前的博客:HarmonyOS之深入分析常用组件Text的功能和使用. T ...
微信小程序自定义组件，提示组件
微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加"components"目录,然后像添加Page ...
angular input_快速地上手Angular组件开发
如果我会一些Javascript的基础知识,我可以快速地上手Angular吗?或者说,我是一名前端工作者,没有接触过Angular,我该如何快速地使用Angular进行日常开发呢?我是轻流前端团队的一 ...

angular组件--tips提示功能

angular组件--tips提示功能相关推荐

最新文章

热门文章