u-alert-tips

<template>
  <view
    class="u-alert-tips"
    v-if="show"
    :class="[
		!show ? 'u-close-alert-tips': '',
		type ? 'u-alert-tips--bg--' + type + '-light' : '',
		type ? 'u-alert-tips--border--' + type + '-disabled' : '',
	]"
    :style="{
		backgroundColor: borderColor,
		borderColor: bgColor
	}"
  >
    <view class="u-icon-wrap">
      <u-icon
        v-if="showIcon"
        :name="$u.type2icon(type)"
        :size="description ? 20 : 18"
        class="u-icon"
        :color="type"
      ></u-icon>
    </view>
    <view class="u-alert-content" @tap.stop="click">
      <view class="u-alert-title" :style="{fontWeight: description ? 250 : 'normal'}">{{title}}</view>
      <view v-if="description" class="u-alert-desc">{{description}}</view>
    </view>
    <view class="u-icon-wrap">
      <u-icon
        @click="close"
        v-if="closeAble && !closeText"
        hoverClass="u-type-error-hover-color"
        name="close"
        color="#c0c4cc"
        :size="11"
        class="u-close-icon"
        :style="{
				top: description ? '9rpx' : '12rpx'
			}"
      ></u-icon>
    </view>
    <text
      v-if="closeAble && closeText"
      class="u-close-text"
      :style="{
			top: description ? '9rpx' : '12rpx'
		}"
    >{{closeText}}</text>
  </view>
</template>

<script>
/**
 * alertTips 警告提示
 * @description 警告提示，展现需要关注的信息
 * @tutorial https://uviewui.com/components/alertTips.html
 * @property {String} title 显示的标题文字
 * @property {String} description 辅助性文字，颜色比title浅一点，字号也小一点，可选
 * @property {String} type 关闭按钮(默认为叉号icon图标)
 * @property {String} close-able 用文字替代关闭图标，close-able为true时有效
 * @property {Boolean} show-icon 是否显示左边的辅助图标
 * @property {Boolean} show 显示或隐藏组件
 * @event {Function} click 点击组件时触发
 * @event {Function} close 点击关闭按钮时触发
 */
export default {
  name: 'u-alert-tips',
  props: {
    // 显示文字
    title: {
      type: String,
      default: ''
    },
    // 主题，success/warning/info/error
    type: {
      type: String,
      default: 'warning'
    },
    // 辅助性文字
    description: {
      type: String,
      default: ''
    },
    // 是否可关闭
    closeAble: {
      type: Boolean,
      default: false
    },
    // 关闭按钮自定义文本
    closeText: {
      type: String,
      default: ''
    },
    // 是否显示图标
    showIcon: {
      type: Boolean,
      default: false
    },
    // 文字颜色，如果定义了color值，icon会失效
    color: {
      type: String,
      default: ''
    },
    // 背景颜色
    bgColor: {
      type: String,
      default: ''
    },
    // 边框颜色
    borderColor: {
      type: String,
      default: ''
    },
    // 是否显示
    show: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {}
  },
  methods: {
    // 点击内容
    click() {
      this.$emit('click')
    },
    // 点击关闭按钮
    close() {
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../libs/css/style.components.scss';

.u-alert-tips {
  display: flex;
  align-items: center;
  padding: 8rpx 15rpx;
  border-radius: 4rpx;
  position: relative;
  transition: all 0.3s linear;
  border: 1px solid #fff;

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

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

  &--bg--success-light {
    background-color: #dbf1e1;
  }

  &--bg--warning-light {
    background-color: #fdf6ec;
  }

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

  &--border--primary-disabled {
    border-color: #a0cfff;
  }

  &--border--success-disabled {
    border-color: #71d5a1;
  }

  &--border--error-disabled {
    border-color: #fab6b6;
  }

  &--border--warning-disabled {
    border-color:#fcbd71;
  }

  &--border--info-disabled {
    border-color: #c8c9cc;
  }
}

.u-close-alert-tips {
  opacity: 0;
  visibility: hidden;
}

@keyframes myfirst {
  from {
    height: 100%;
  }

  to {
    height: 0;
  }
}

.u-icon {
  margin-right: 8rpx;
}

.u-alert-title {
  font-size: 14rpx;
  color: #303133;
}

.u-alert-desc {
  font-size: 13rpx;
  text-align: left;
  color: #606266;
}

.u-close-icon {
  position: absolute;
  top: 10rpx;
  right: 10rpx;
}

.u-close-hover {
  color: red;
}

.u-close-text {
  font-size: 12rpx;
  color: #909399;
  position: absolute;
  top: 10rpx;
  right: 10rpx;
  line-height: 1;
}
</style>