基于Vue實現(xiàn)消息提示功能

更新時間：2024年10月24日 11:06:58 作者：陌路物是人非

這篇文章主要為大家詳細介紹了如何基于Vue實現(xiàn)簡單的消息提示功能,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下

1.首先要先定義消息提示的組件，在這個組件中需要實現(xiàn)自動關閉的功能（看自己的愛好唄），并且設置自己喜歡的樣式，vue中還有可以自定義進場和退場動畫的樣式（就是那個v-enter-active和v-leave-active）。這里還可以通過definePorps在外部設置屬性值

<template>
    <div class="message" v-if="display">
 
        <div class="content">
            <div>Message組件實例</div>
            <div class="close" @click="close">X</div>
        </div>
 
    </div>
 
 
</template>
<script setup>
    import { ref, onMounted } from 'vue';
    let display = ref(false);
    function close() {
        display.value = false
    }
    onMounted(() => {
        display.value = true;
        setTimeout(() => {
            display.value = false;
        }, 5000)
    })
</script>
<style>
    .content {
        display: flex;
        position: relative;
        transform: translateY(-50%);
        top: 50%;
    }
 
    .message {
        border: 3px skyblue solid;
        border-radius: 20px;
        width: fit-content;
        height: 30px;
        text-align: center;
        padding: 10px;
        position: relative;
        transform: translateX(-50%);
        left: 50%;
    }
 
 
    .close {
        margin-left: 20px;
        font-weight: 700;
        padding: 2px;
        border: 1px solid red;
        background-color: red;
    }
</style>

2. 通過h函數(shù)和render函數(shù)實現(xiàn)組件的掛載

首先需要通過h函數(shù)創(chuàng)建組件的虛擬節(jié)點，h函數(shù)有多個重寫方法（h函數(shù)的具體用法），這里用的直接傳入一個節(jié)點（也就是自定義的組件），h函數(shù)會有一個VNode的返回值，通過render渲染函數(shù)進行渲染，然后將div掛載到body上，最后將這個函數(shù)導出

import Message from './Message.vue'
import { h, render } from 'vue'
export function createMessage() {
 
    const div = document.createElement("div");
    render(h(Message), div);
    document.body.appendChild(div)
}

3.使用

這里實現(xiàn)的是最簡單的消息提示，正常來說應該用props來傳遞屬性（比如傳遞的消息內(nèi)容等等）。

    import { createMessage } from './message/Message.js'
    createMessage();

例如說這樣

<template>
    <div class="message" v-if="display">
        <div class="content">
            <div>{{message}}</div>
            <div class="close" @click="close">X</div>
        </div>
 
    </div>
</template>
<script setup>
    import { ref, onMounted } from 'vue';
    const { message } = defineProps(["message"])
</script>
import Message from './Message.vue'
import { h, render } from 'vue'
export function createMessage({ Msg = "消息提示" }) {
    const div = document.createElement("div");
    render(h(Message, { message: Msg }), div);
    document.body.appendChild(div)
}
 
<script setup>
    import { createMessage } from './message/Message.js'
    createMessage({ Msg: "Hello World" });
</script>
 
<template>
</template>

這樣就可以實現(xiàn)一個簡單的消息傳遞，但是功能非常的不全（所以我為什么不用Element呢.......），可以當成事件觸發(fā)后的提示功能

到此這篇關于基于Vue實現(xiàn)消息提示功能的文章就介紹到這了,更多相關Vue消息提示內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: