antd-mini/native/Toast/index.ts

antd-mini 是支付宝小程序 UI 组件库，遵循 Ant Design 规范。

import {
  Component,
  getValueFromProps,
  triggerEventOnly,
} from '../_util/simply';
import { ToastDefaultProps } from './props';

Component({
  props: ToastDefaultProps,
  data: {
    show: false,
  },
  timer: null,
  methods: {
    closeMask() {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.setData({ show: false });
      this.timer = null;
      triggerEventOnly(this, 'close');
    },
    handleShowToast() {
      this.setData({ show: true });

      const duration = getValueFromProps(this, 'duration');
      if (duration > 0) {
        const timer = setTimeout(() => {
          this.closeMask();
        }, duration);
        this.timer = timer;
      }
    },
    handleClickMask() {
      const [showMask, maskCloseable] = getValueFromProps(this, [
        'showMask',
        'maskCloseable',
      ]);
      if (showMask && maskCloseable) {
        this.closeMask();
      }
    },
  },
  didUpdate(prev) {
    const visible = getValueFromProps(this, 'visible');
    if (!prev.visible && visible) {
      this.handleShowToast();
    } else if (!visible && this.data.show) {
      this.closeMask();
    }
  },
  didMount() {
    const visible = getValueFromProps(this, 'visible');
    if (visible) {
      this.handleShowToast();
    }
  },

});