封装 Angular Material Toast

作者:frank 发表日期:2016-09-23 11:47:47 更新日期:2016-09-23 11:47:47 分类:猿文色

摘要

封装 Angular Material Toast

正文

平时使用 Angular Material Toast 时需要先引用 $Toast Service,再通过下述代码使用:

// 正常使用 Toast
$mdToast.show(
  $mdToast.simple()
    .textContent('Simple Toast!')
    .position('left top')
    .hideDelay(3000)
);

为了方便使用,对其进行了封装,并加入了倒计时效果:

(function () {
  'use strict';

  angular.module('myapp.tosatgod', [])
    .factory('ToastGod', ToastGod);

  var SUCCESS_TIMEOUT = 3; // 3000ms
  var ERROR_TIMEOUT = 9; // 9000ms
  var MESSAGE_TIMEOUT = 5;
  var UPDATE_TIMER = 1; // 1000ms

  /**
   * @ngInject
   */
  function ToastGod($mdToast, $interval) {
    var toastGod = {};
    var toastIntervalTimer;

    var getMessage = function (title, msg) {
      if (title) {
        if (msg) {
          return title + ':' + msg;
        } else {
          return title;
        }
      }

      return msg;
    };

    var clearTimer = function () {
      // 清除已有的 Toast 状态
      $interval.cancel(toastIntervalTimer);
      $mdToast.hide();
    };

    toastGod.success = function (title, msg) {
      this.message(title, msg, SUCCESS_TIMEOUT);
    };

    toastGod.error = function (title, msg) {
      this.message(title, msg, ERROR_TIMEOUT);
    };

    toastGod.message = function (title, msg, timeout) {
      var timeoutMsg = timeout || MESSAGE_TIMEOUT;
      var message = getMessage(title, msg);

      clearTimer();

      if (!message) {
        return;
      }

      $mdToast.show(
        $mdToast.simple()
          .content(message + '(' + timeoutMsg + ')')
          .position('right top')
          .hideDelay(timeoutMsg * 1000)
          .action('关闭')
      );

      toastIntervalTimer = $interval(function () {
        $mdToast.updateContent(message + '(' + --timeoutMsg + ')');
      }, UPDATE_TIMER * 1000, timeoutMsg);
    };

    return toastGod;
  }

})();

如何使用:

  1. 依赖模块 myapp.tosatgod
  2. 注入服务 ToastGod
ToastGod.success('Success', timeout); // timeout 可选
ToastGod.Error('Error', timeout); // timeout 可选

ToastGod.Message('message', timeout); // timeout 可选