基于vue3 + ts 封装一个自定义的message组件

基于vue3 + ts 封装一个自定义的message组件

今天尝试封装一个message弹框组件 废话不多说直接上代码
Message.vue

<template>
    <transition name="down" @after-leave="close">
        <div v-show="visible" class="msg-box">这是一个message组件</div>
    </transition>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
type PropsType = {
    timeout: number
    close: ()=> void
}

const {timeout = 3000, close} = defineProps<PropsType>()

let visible = ref(false)


onMounted(()=> {
    visible.value = true
    setTimeout(()=> {
        visible.value = false
    },timeout)
})


</script>


<style scoped>



.msg-box {
    position: absolute;
    width: 30%;
    height: 50px;
    left: 50%;
    transform: translateX(-50%);
    top: 15%;
    text-align: center;
    line-height: 50px;
    background-color: rgba(0,0,0,0.5);
    box-shadow: 0,0,5px rgba(0,0,0,0.5);
}

.down-enter-active,
.down-leave-active {
  transition: all 0.5s;
}

.down-enter-from,
.down-leave-to {
  opacity: 0;
  transform: translate3d(-50%, -100px, 0);
}
</style>

index.ts

import { h,render } from 'vue'
import Message from "./Message.vue";

export  const onMessage = (timeout: number = 3000) => {
    
    const close = ()=> {
        render(null, document.body)
    }
    const renderDom = h(Message, {
        timeout,
        close
    })
    render(renderDom, document.body)
}

代码中使用

1.导入组件
2.使用组件
const onMsg = () => {
  onMessage()
}

组件封装的比较简陋只是提供一种思路 有需要的同学可以借鉴思路 封装自己的组件