SOURCE

<template>
  <div class="ue-exception">
    <div class="ue-exception-icon" v-if="icon">
      <slot name="icon">
        <img :src="getSrc" />
      </slot>
    </div>
    <div class="ue-exception-content">
      <h5 class="ue-exception-title" v-if="getTitle">{{ getTitle }}</h5>
      <p class="ue-exception-desc" v-if="getDesc">{{ getDesc }}</p>
      <slot></slot>
    </div>
  </div>
</template>
<script>
/*
  **************************************************
  version: '0.10'
  author": "46898"
  description": 异常(无数据、开发中、无权限、系统忙、服务器出错)组件
  **************************************************
 */
export default {
  props: {
    // 类型
    type: {
      default: 'noFound',
      type: String,
      validator (value) {
        return [
          'noData',
          'development',
          'authority',
          'noFound',
          'busys',
          'gateway'
        ].indexOf(value) > -1
      }
    },
    // 标题
    title: {
      type: String,
      default: ''
    },
    // 描述
    desc: {
      type: String,
      default: ''
    },
    // 小图片
    iconUrl: {
      type: String,
      default: ''
    },
    // 是否显示icon
    icon: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
    }
  },
  computed: {
    // 获取标题
    getTitle () {
      const { type, title } = this
      return title || this.$t('common.exception.' + type + '.title')
    },
    // 获取描述
    getDesc () {
      const { type, desc } = this
      return desc || this.$t('common.exception.' + type + '.desc')
    },
    // 获取图片地址索引
    getSrc () {
      const { type, iconUrl } = this
      return iconUrl || this.$t('common.exception.' + type + '.iconUrl')
    }
  }
}
</script>
<style lang="scss">
.ue-exception {
  margin: 0 auto;
  text-align: center;
  .ue-exception-icon {
    margin: 0 auto;
    text-align: center;
    width: 350px;
    padding: 20px 0 40px;
  }
  .ue-exception-content {
    .ue-exception-title {
      padding: 0 0 20px;
    }
    .ue-exception-desc {
      padding: 0 0 20px;
    }
  }
}
</style>