liveh5-nuxt/app/components/x-message/message/index.vue

<script setup>

import error from '../images/error.png'
import success from '../images/success.png'
import warning from '../images/warning.png'

const props = defineProps({
  type: {
    type: String,
    default: 'success',
    validator: value => ['success', 'error', 'warning'].includes(value),
  },
  text: {
    type: String,
    default: '',
  },
})

const typeConfig = {
  success: {
    imgSrc: success,
    borderColor: '#C5E7D5',
    bgColor: '#EDF7F2',
  },
  error: {
    imgSrc: error,
    borderColor: '#F3CBD3',
    bgColor: '#FBEEF1',
  },
  warning: {
    imgSrc: warning,
    borderColor: '#FAE0B5',
    bgColor: '#FEF7ED',
  },
}
</script>

<template>
  <div
    class="box-border min-h-[46px] w-[343px] flex items-center border rounded-[4px] px-[15px] shadow-sm"
    :style="{
      borderColor: typeConfig[type].borderColor,
      backgroundColor: typeConfig[type].bgColor,
    }"
  >
    <div class="mr-[9px] h-[20px] w-[20px]">
      <img
        :src="typeConfig[type].imgSrc"
        class="h-full w-full"
        alt=""
      >
    </div>
    <div class="text-[14px] text-black leading-normal">
      {{ text }}
    </div>
  </div>
</template>