ionic3 toastController使用封装

发布时间:2019-06-02 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了ionic3 toastController使用封装脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

1. 说明

toastController是ionic官方提供的消息提示框组件,用于给用户操作后结果反馈和提示。
官网地址:https://ionicframework.com/do...
如下是默认的样式,项目中使用则需要去改变很多样式则需要讲解一些入参。

clipboard.png

2. 使用

  • 控制台运行命令,创建服务
ionic g PRovicer ToastService
  • 编写程序
import { Injectable } From '@Angular/core';
/**
导入ionic消息提示框模块ToastController
*/
import { ToastController } from "ionic-angular";

/*
  Generated class for the ToastServiceProvider provider.

  See https://angular.io/guide/dePEndency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class ToastServiceProvider {

//自己定义的三种消息框样式
  errorCss='errorToast'
  generalCss='generalToast'
  successCss='successToast'

/**
构造函数引入
*/
  constructor(public toast:ToastController) {
    console.log('Hello ToastServiceProvider Provider');
  }

  /**
   * 错误信息提示框
   * @param message 消息
   */
  errorToast(message:any){
    this.presentToast(message,this.errorCss);
  }

  /**
   * 普通信息提示框
   * @param message 消息
   */
  generalToast(message:any){
    this.presentToast(message,this.generalCss);
  }

  /**
   * 成功信息提示框
   * @param message
   */
  successToast(message:any){
    this.presentToast(message,this.successCss);
  }

  /**
   *
   * @param message需要展示的信息
   * @param css 自定义的背景颜色
   */
  presentToast(message:any,css:string) {
    let toast = this.toast.create({
      message: message,//提示消息内容
      duration: 3000,//显示时长,单位毫秒
      position: 'bottom',//消息框出现的位置,bottom就是底端的意思,自然就有top和中间了
      showCloseButton:true,//是否有关闭按钮,true就是有
      cssClass:css,//自己给消息框定义的样式,css样式名称
      closeButtonText:'关闭'//关闭按钮上的文字
    });

    toast.onDidDismiss(() => {
      console.log('Dismissed toast');
    });

    toast.present();//出发消息提示框
  }

}
  • 对应的css文件
.errorToast{
  //.toast-message{
  //  color: #a94442;
  //}
  .toast-wrapper {
    //background: #eba6ac;
    background: #f53d3d;
  }
}
.generalToast{
  .toast-wrapper {
    background: #488aff;
  }
}
.successToast{
  .toast-wrapper {
    background: #32db64;
  }
}

3. 导入

app.module.ts中声明服务,那个页面需要使用,引用即可。

4.效果

成功提示消息:

clipboard.png

失败提示:

ionic3 toastController使用封装

脚本宝典总结

以上是脚本宝典为你收集整理的ionic3 toastController使用封装全部内容,希望文章能够帮你解决ionic3 toastController使用封装所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。