快捷導(dǎo)航

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

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

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

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

<template>
    <div class="message" v-if="display">
 
        <div class="content">
            <div>Message組件實(shí)例</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. 通過(guò)h函數(shù)和render函數(shù)實(shí)現(xiàn)組件的掛載

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

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.使用

這里實(shí)現(xiàn)的是最簡(jiǎn)單的消息提示，正常來(lái)說(shuō)應(yīng)該用props來(lái)傳遞屬性（比如傳遞的消息內(nèi)容等等）。

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

例如說(shuō)這樣

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

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

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

您可能感興趣的文章: