english_learned_master/components/alert-tip/alert-tip.js

Component({
  properties: {
    // 提示内容
    content: {
      type: String,
      value: ''
    },
    // 容器背景颜色
    containerbgColor: {
      type: String,
      value: '#e3e3e3'
    },
    // 背景颜色
    bgColor: {
      type: String,
      value: '#CA4B15'
    },
    // 文字颜色
    textColor: {
      type: String,
      value: '#FFFFFF'
    },
    // 图标路径
    iconPath: {
      type: String,
      value: '../../pages/images/sysIcon_b11.png'
    },
    // 显示时长(毫秒)，显示多久后开始淡出
    duration: {
      type: Number,
      value: 1000
    },
    // 淡出动画时长(毫秒)
    fadeOutDuration: {
      type: Number,
      value: 1000
    }
  },

  data: {
    isShow: false,
    alertClass: ''
  },

  methods: {
    // 显示提示
    showAlert: function(content) {
      const that = this;
      
      // 如果传入了content参数，则更新content属性
      if (content) {
        this.setData({
          content: content
        });
      }
      
      // 显示提示
      this.setData({
        isShow: true,
        alertClass: ''
      });
      
      // 设置定时器，显示一段时间后开始淡出
      setTimeout(function() {
        that.setData({
          alertClass: 'alert-fadeout'
        });
        
        // 淡出动画结束后，完全隐藏元素
        setTimeout(function() {
          that.setData({
            isShow: false,
            alertClass: ''
          });
        }, that.data.fadeOutDuration);
      }, that.data.duration);
    }
  }
});