vue3 headless flash

Vue 3 Headless Blitz (Toaster)

Kopflos bezieht sich standardmäßig auf kein CSS. Sie können die Nachricht mit Ihrer benutzerdefinierten Vorlage wie gewünscht flashen.

Demo: https://vue3-headless-flash.netlify.app/

Installation

yarn add vue3-headless-flash

Verwendung

Grundlegende Verwendungen

Schritt 1: Importieren Sie den FlashContainer und Flash

// App.vue

< script >
    import { defineComponent } from " vue "
    import { Flash , FlashContainer } from " vue3-headless-flash "
    import " vue3-headless-flash/dist/style.css "

    export default defineComponent ({
        components : {
            FlashContainer
        },
        setup () {
            return {
                Flash
            }
        }
    })
</ script >

Schritt 2: Platzieren Sie die FlashContainer -Komponente in Bash -Layout. Addeln Sie auch eine Taste, um die Flash -Aktion zu demonstrieren.

< template >
    < button @click = " Flash.success('Hello I am success') " ></ button >
    < FlashContainer />
</ template >

Komplettes Beispiel sieht aus wie:

< template >
    < button @click = " Flash.success('Hello I am success') " ></ button >
    < FlashContainer />
</ template >
< script >
    import { defineComponent } from " vue "
    import { Flash , FlashContainer } from " vue3-headless-flash "

    export default defineComponent ({
        components : {
            FlashContainer
        },
        setup () {
            return {
                Flash
            }
        }
    })
</ script >

Benutzerdefiniertes Layout

< template >
    < FlashContainer
        :option = " OPTIONS "
        :timeout = " 5000 "
        wrapper-class = " absolute w-[200px] right-[20px] bottom-[20px] "
        v-slot = " slotProps " >
        < div class = " relative flex justify-between rounded-md px-6 py-3 mb-2 " :class = " slotProps.option.class " >
            < div class = " flex items-center " >
                < button type = " button " @click.stop = " slotProps.click(slotProps.flash.timestamp) " >
                    & times ;
                </ button >
                < div class = " ml-2 " :class = " slotProps.option.textClass " >
                    {{ slotProps.flash.message }}
                </ div >
            </ div >
            < component :is = " slotProps.option.icon " class = " w-6 h-6 " :class = " slotProps.option.iconClass " />
        </ div >
    </ FlashContainer >
</ template >
< script setup>
    import { SucessIcon }      from " ./IconPath "
    import { ErrorIcon }       from " ./IconPath "
    import { WarningIcon }     from " ./IconPath "
    import { InfoIcon }        from " ./IconPath "

    const OPTIONS = {
        SUCCESS : {
            icon : SuccessIcon,
            class : " bg-green-500 " ,
            textClass : " text-white " ,
            iconClass : " stroke-[#fff] " ,
        },
        ERROR : {
            icon : ErrorIcon,
            class : " bg-red-200 " ,
            textClass : " text-red-500 " ,
            iconClass : " stroke-red-500 " ,
        },
        INFO : {
            icon : InfoIcon,
            class : " bg-gray-300 " ,
            textClass : " text-gray-600 " ,
            iconClass : " stroke-gray-600 " ,
        },
        WARNING : {
            icon : WarningIcon,
            class : " bg-yellow-400 " ,
            textClass : " text-gray-800 " ,
            iconClass : " stroke-gray-800 " ,
        }
    }
</ script >

Hier werden alle Optioneneigenschaften, die Sie als Parameter übergeben haben, über die Eigenschaften von Slot zugreifen.

Lizenz

MIT © https://github.com/jobinsjp/vue3-headless-flash