ionic3 自定义toast样式

文件目录结构：

在使用ionic3来写toast效果时，会有各种各样对toast样式的需求，

在全局的app.scss中添加以下内容

备注：（这里的样式也可以放置在组件的scss文件中，但是是独立开来的，不要嵌套在组件的page-xxx中去）

//吐司颜色、大小
  .box {
    width: 200px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
  }
  .toast-container {
    width: 100%;
  }
  .error {
    .toast-message {
      color: #a94442;
    }
    .toast-wrapper {
      background: #f2dede;
      @extend .box;
    }
  }
  .success {
    .toast-message {
      color: #3c763d;
    }
    .toast-wrapper {
      background: #dff0d8;
      @extend .box;
    }
  }
  .tip {
    .toast-message {
      color: #31708f;
    }
    .toast-wrapper {
      background: #d9edf7;
      @extend .box;
    }
  }
  .toast-md .toast-wrapper.toast-top {
    top: 47px;
    height: 33px;
  }
  .toast-md .toast-message {
    display: flex;
    justify-content: center;
    font-size: .8em;
    padding-top: 8px;
  }

在使用的组件中添加这一段代码：

presentToast(position: string,classstyle: string) {
    const toast = this.toastCtrl.create({
      message: '账户或密码不能为空！',     //需要提示的信息
      duration: 2000,                   //持续时长
      position: position,               //位置
      showCloseButton: true,            //是否显示关闭按钮
      closeButtonText: 'Ok',            //关闭按钮的文字内容
      cssClass: classstyle              //自定义的样式
    });
    toast.present();
  }


 this.presentToast("middle","success");  //调用方式

效果如图：