123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657 |
- <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>
|