bigDataApp/components/Alert/Alert.vue

<template>
  <u-transition mode="fade-down" :show="show">
    <view
      class="u-custom-alert"
      :class="[`u-custom-alert--${type}--${effect}`]"
      @tap.stop="clickHandler"
    >
      <view class="u-custom-alert__icon" v-if="showIcon">
        <u-icon :name="iconName" size="18" :color="iconColor"></u-icon>
      </view>
      <view
        class="u-custom-alert__content"
        :style="[
          {
            paddingRight: closable ? '20px' : 0
          }
        ]"
      >
        <text
          class="u-custom-alert__content__title"
          v-if="title"
          :style="[
            {
              fontSize: $u.addUnit(fontSize),
              textAlign: center ? 'center' : 'left'
            }
          ]"
          :class="[
            effect === 'dark'
              ? 'u-custom-alert__text--dark'
              : `u-custom-alert__text--${type}--light`
          ]"
          >{{ title }}</text
        >
        <view class="u-custom-alert__content__row-space-end">
          <text
            class="u-custom-alert__content__desc"
            v-if="description"
            :style="[
              {
                fontSize: $u.addUnit(fontSize),
                textAlign: center ? 'center' : 'left'
              }
            ]"
            :class="[
              effect === 'dark'
                ? 'u-custom-alert__text--dark'
                : `u-custom-alert__text--${type}--light`
            ]"
            >{{ description }}</text
          >
          <text class="u-custom-alert__content__more"> 更多》</text>
        </view>
      </view>
      <view
        class="u-custom-alert__close"
        v-if="closable"
        @tap.stop="closeHandler"
      >
        <u-icon name="close" :color="iconColor" size="15"></u-icon>
      </view>
    </view>
  </u-transition>
</template>

<script>
/**
 * Alert  警告提示
 * @description 警告提示，展现需要关注的信息。
 * @tutorial https://www.uviewui.com/components/alertTips.html
 *
 * @property {String}			title       显示的文字
 * @property {String}			type        使用预设的颜色  （默认 'warning' ）
 * @property {String}			description 辅助性文字，颜色比title浅一点，字号也小一点，可选
 * @property {Boolean}			closable    关闭按钮(默认为叉号icon图标)  （默认 false ）
 * @property {Boolean}			showIcon    是否显示左边的辅助图标   （ 默认 false ）
 * @property {String}			effect      多图时，图片缩放裁剪的模式  （默认 'light' ）
 * @property {Boolean}			center		文字是否居中  （默认 false ）
 * @property {String | Number}	fontSize    字体大小  （默认 14 ）
 * @property {Object}			customStyle	定义需要用到的外部样式
 * @event    {Function}        click       点击组件时触发
 * @example  <u-alert :title="title"  type = "warning" :closable="closable" :description = "description"></u-alert>
 */
export default {
  name: 'u-custom-alert',
  props: {
    // 显示文字
    title: {
      type: String,
      default: uni.$u.props.alert.title
    },
    // 主题，success/warning/info/error
    type: {
      type: String,
      default: uni.$u.props.alert.type
    },
    // 辅助性文字
    description: {
      type: String,
      default: uni.$u.props.alert.description
    },
    // 是否可关闭
    closable: {
      type: Boolean,
      default: uni.$u.props.alert.closable
    },
    // 是否显示图标
    showIcon: {
      type: Boolean,
      default: uni.$u.props.alert.showIcon
    },
    // 浅或深色调，light-浅色，dark-深色
    effect: {
      type: String,
      default: uni.$u.props.alert.effect
    },
    // 文字是否居中
    center: {
      type: Boolean,
      default: uni.$u.props.alert.center
    },
    // 字体大小
    fontSize: {
      type: [String, Number],
      default: uni.$u.props.alert.fontSize
    }
  },
  data() {
    return {
      show: true
    };
  },
  computed: {
    iconColor() {
      // return this.effect === 'light' ? this.type : '#fff';
      return '#fff';
    },
    // 不同主题对应不同的图标
    iconName() {
      switch (this.type) {
        case 'success':
          return 'checkmark-circle-fill';
          break;
        case 'error':
          return 'close-circle-fill';
          break;
        case 'warning':
          return 'warning-fill';
          break;
        case 'info':
          return 'info-circle-fill';
          break;
        case 'primary':
          return 'more-circle-fill';
          break;
        default:
          return 'error-circle-fill';
      }
    }
  },
  methods: {
    // 点击内容
    clickHandler() {
      this.$emit('click');
    },
    // 点击关闭按钮
    closeHandler() {
      console.log('closeHandler', '------------------------- ');
      this.show = false;
      this.$emit('close');
    }
  }
};
</script>

<style lang="scss" scoped>
.u-custom-alert {
  position: relative;
  padding: 8px 10px;
  align-items: center;
  border-top-left-radius: 16rpx;
  border-top-right-radius: 16rpx;
  border-bottom-left-radius: 16rpx;
  border-bottom-right-radius: 16rpx;
  pointer-events: auto;

  &--primary--dark {
  }

  &--primary--light {
    background-color: #ecf5ff;
  }

  &--error--dark {
  }

  &--error--light {
    background-color: #fef0f0;
  }

  &--success--dark {
  }

  &--success--light {
    background-color: #f5fff0;
  }

  &--warning--dark {
  }

  &--warning--light {
    background-color: rgba(238, 172, 25, 0.8);
  }

  &--info--dark {
  }

  &--info--light {
    background-color: #f4f4f5;
  }

  &__icon {
    margin-right: 5px;
  }

  &__content {
    flex: 1;

    &__title {
      font-size: 14px;
      font-weight: bold;
      color: #fff;
      margin-bottom: 2px;
    }

    &__desc {
      font-size: 14px;
      flex-wrap: wrap;
      color: #fff;
    }

    &__more {
      color: #fff;
      font-size: 14px;
    }

    &__row-space-end {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-right: 20px;
    }
  }

  &__title--dark,
  &__desc--dark {
    color: #ffffff;
  }

  &__text--primary--light,
  &__text--primary--light {
  }

  &__text--success--light,
  &__text--success--light {
  }

  &__text--warning--light,
  &__text--warning--light {
    color: #fff;
  }

  &__text--error--light,
  &__text--error--light {
  }

  &__text--info--light,
  &__text--info--light {
  }

  &__close {
    position: absolute;
    top: 11px;
    right: 10px;
    z-index: 12;
  }
}
</style>