qjkankan_v1.1.1/packages/qjkankan-components/src/components/message/message.vue

<template>
  <teleport to="body">
    <transition name="fade">
      <div 
        class="ui-message" 
        :style="{ zIndex: zIndex, marginTop: `${index.value * 60}px` }" 
        :class="type" v-if="show">
        <ui-icon :type="icons[type]" class="icon" />
        <p>{{ msg }}</p>
      </div>
    </transition>
  </teleport>
</template>


<script setup>
import uiIcon from '../icon'
import getZindex from '../../utils/zindex'
import { defineProps, onMounted, ref, nextTick } from 'vue'

const props = defineProps({
  msg: {
    type: String
  },
  type: {
    type: String
  },
  time: {
    type: Number
  },
  destroy: {
    type: Function
  },
  index: {}
})
const zIndex = getZindex()
const icons = {
  success: 'state_s',
  warning: 'state_e',
  error: 'state_f'
}
const show = ref(false)

if (props.time) {
  setTimeout(
    () => {
      show.value = false
      setTimeout(props.destroy, 500)
    }, 
    props.time
  )
}

onMounted(() => nextTick(() => show.value = true))
</script>

<script> export default { name: 'ui-message' } </script>