shared-components/packages/PromptText/src/index.vue

<template>
  <div class="prompt-text" :class="typeClass">
    <div class="flex-text">
      <div class="flex">
        <img class="prompt-icon" :src="typeIcon" alt="">
        <span class="prompt-desc">{{ text }}</span>
      </div>
      <div class="flex">
        <slot name="next_desc" />
      </div>
    </div>
    <div class="prompt-extra">
      <slot name="desc" />
    </div>
  </div>
</template>
<script>
import './index.scss'
export default {
  name: 'PromptText',
  props: {
    text: {
      type: String,
      required: true
    },
    type: {
      type: [Number, String],
      default: 2
    },
  },
  components: {
  },
  data() {
    return {}
  },
  computed: {
    typeClass() {
      switch (parseInt(this.type)) {
        case 1: return 'info';
        case 2: return 'notice';
        case 3: return 'warning';
        default: return 'notice';
      }
    },
    typeIcon() {
      switch (parseInt(this.type)) {
        case 1: return require('../../assets/prompt-icon-1.svg');
        case 2: return require('../../assets/prompt-icon-2.svg');
        case 3: return require('../../assets/prompt-icon-3.svg');
        default: return require('../../assets/prompt-icon-2.svg');
      }
    }
  },
  methods: {

  }
}
</script>