@uni/toast/es/web/showToast.js

[](https://www.npmjs.com/package/@uni/toast)

/* eslint-disable guard-for-in */
import { normalize } from "../utils/index";
var styles = {
  container: {
    backgroundColor: 'rgba(0, 0, 0, 0.6)',
    boxSizing: 'border-box',
    maxWidth: '80%',
    color: '#ffffff',
    padding: '8px 16px',
    position: 'fixed',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    left: '50%',
    bottom: '50%',
    fontSize: '16px',
    lineHeight: '32px',
    fontWeight: '600',
    borderRadius: '4px',
    textAlign: 'center',
    transition: 'all 0.4s ease-in-out',
    webkitTransition: 'all 0.4s ease-in-out',
    transform: 'translateX(-50%)',
    webkitTransform: 'translateX(-50%)',
    zIndex: 9999
  },
  icon: {
    marginBottom: '5px',
    width: '45px',
    height: '45px'
  }
};

function showToastWindow(message, iconUrl) {
  if (!window._uni_toast_status.toastWin) {
    window._uni_toast_status.toastIcon = null;
    window._uni_toast_status.toastWin = document.createElement('div');

    window._uni_toast_status.toastWin.setAttribute('role', 'alert'); // support for ARIA, add tabindex for focus
    // https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/tabindex


    window._uni_toast_status.toastWin.setAttribute('tabindex', '-1');

    for (var key in styles.container) {
      window._uni_toast_status.toastWin.style[key] = styles.container[key];
    }

    window._uni_toast_status.toastContent = document.createElement('div');

    window._uni_toast_status.toastWin.appendChild(window._uni_toast_status.toastContent);

    document.body.appendChild(window._uni_toast_status.toastWin);
  } // 创建icon


  if (window._uni_toast_status.toastIcon && !iconUrl) {
    window._uni_toast_status.toastWin.removeChild(window._uni_toast_status.toastIcon);

    window._uni_toast_status.toastIcon = null;
  } else if (window._uni_toast_status.toastIcon && iconUrl) {
    window._uni_toast_status.toastIcon.setAttribute('src', iconUrl);
  } else if (!window._uni_toast_status.toastIcon && iconUrl) {
    window._uni_toast_status.toastIcon = document.createElement('img');

    window._uni_toast_status.toastIcon.setAttribute('src', iconUrl);

    for (var _key in styles.icon) {
      window._uni_toast_status.toastIcon.style[_key] = styles.icon[_key];
    }

    window._uni_toast_status.toastWin.insertBefore(window._uni_toast_status.toastIcon, window._uni_toast_status.toastContent);
  }

  window._uni_toast_status.toastContent.textContent = message;
  window._uni_toast_status.toastWin.style.transform = 'translateX(-50%)';
  window._uni_toast_status.toastWin.style.webkitTransform = 'translateX(-50%)';
}

function hideToastWindow() {
  setTimeout(function () {
    if (window._uni_toast_status.toastWin && window._uni_toast_status.toastWin.style) {
      window._uni_toast_status.toastWin.style.transform = 'translateX(-50%) scale(0.8)';
      window._uni_toast_status.toastWin.style.webkitTransform = 'translateX(-50%) scale(0.8)';
    }
  }, 0);
}

var innerToast = {
  hideTimer: null,
  show: function show() {
    // All messages had been toasted already, so remove the toast window,
    if (!window._uni_toast_status.queue.length) {
      if (window._uni_toast_status.toastWin) {
        // eslint-disable-next-line
        window._uni_toast_status.toastWin.parentNode.removeChild(window._uni_toast_status.toastWin);
      }

      window._uni_toast_status.toastWin = null;
      return;
    } // the previous toast is not ended yet.


    if (window._uni_toast_status.isProcessing) return;
    window._uni_toast_status.isProcessing = true;

    var toastInfo = window._uni_toast_status.queue.shift();

    try {
      showToastWindow(toastInfo.content, toastInfo.icon);
    } catch (e) {
      toastInfo.fail && toastInfo.fail(e);
      toastInfo.complete && toastInfo.complete(e);
    }

    innerToast.hideTimer = setTimeout(function () {
      toastInfo.success && toastInfo.success();
      toastInfo.complete && toastInfo.complete();
      innerToast.switchToNext();
    }, toastInfo.duration);
  },
  push: function push(options) {
    window._uni_toast_status.queue.push(options);

    innerToast.show();
  },
  // Switch to next message
  // This function will hide current, and call `show()` to display next
  // If queue is empty, DOM will be clear in `show()`
  switchToNext: function switchToNext() {
    hideToastWindow();
    window._uni_toast_status.isProcessing = false;
    setTimeout(function () {
      return innerToast.show();
    }, 500);

    if (innerToast.hideTimer) {
      clearTimeout(innerToast.hideTimer);
      innerToast.hideTimer = null;
    }
  }
};
var show = normalize(function (options) {
  window._uni_toast_inner_toast = innerToast;
  window._uni_toast_status = window._uni_toast_status || {
    queue: [],
    isProcessing: false,
    toastWin: '',
    toastContent: '',
    toastIcon: ''
  };
  var type = options.type,
      content = options.content,
      duration = options.duration,
      _success = options.success,
      _fail = options.fail,
      _complete = options.complete;
  var iconMap = {
    success: 'https://gw.alicdn.com/imgextra/i1/O1CN01h684sE1Td4mwYyChK_!!6000000002404-2-tps-200-200.png',
    fail: 'https://gw.alicdn.com/imgextra/i1/O1CN01yOywus1et4ORJzafk_!!6000000003928-2-tps-200-200.png',
    none: ''
  };
  innerToast.push({
    content: content,
    duration: duration,
    icon: iconMap[type] || '',
    success: function success() {
      _success && _success();
    },
    fail: function fail(res) {
      _fail && _fail(res);
    },
    complete: function complete(res) {
      _complete && _complete(res);
    }
  });
});
export default show;