ionic提示弹框

最新推荐文章于 2024-07-31 06:15:24 发布

转载最新推荐文章于 2024-07-31 06:15:24 发布 · 690 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/nelsonlei/p/10381988.html

本文详细介绍了一种在Ionic框架中实现自定义提示框的方法，包括如何创建一个带有确认和取消按钮的弹窗，以及如何处理点击这些按钮后的事件响应。通过工厂模式封装提示框功能，使代码更易于复用和维护。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 1 //提示框
 2   .factory('TipsPort', function ($ionicPopup) {
 3     var TipsPort = function (tipsText, SureFunction,CancleFunction, data) {
 4       // 自定义弹窗
 5       var myPopup = $ionicPopup.show({
 6         template: tipsText,
 7         title: '提示',
 8         buttons: [
 9           {
10             text: '取消' ,
11             onTap:function (e) {
12               if(CancleFunction){
13                 CancleFunction();
14                 myPopup.close();
15               }
16             }
17           },
18           {
19             text: '<b>确定</b>',
20             type: 'button-positive',
21             onTap: function(e) {
22               // setTimeout(function () {
23                 if (SureFunction) {
24                   SureFunction(data);
25                 }
26                 myPopup.close();
27               // }, 100);
28 
29             }
30           },
31         ]
32       });
33     }
34     return TipsPort;
35   })

/**
   * tipsText：提示的内容
   * SureFunction：点击确定按钮后的事件
   * CancleFunction：点击取消按钮后的事件
   * data：其他外调方法返回的data数据
   * */

　　应用：TipsPort("修改IP链接后会有可能导致无法登录，是否进行修改？");

　　结果：

转载于:https://www.cnblogs.com/nelsonlei/p/10381988.html