vue3 headless flash

Vue 3 headless flash (pemanggang)

Kepala tanpa kepala mengacu pada CSS secara default sama sekali. Ini memungkinkan Anda untuk mem -flash pesan dengan template khusus sesuai keinginan Anda.

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

Instalasi

yarn add vue3-headless-flash

Penggunaan

Penggunaan Dasar

Langkah 1: Impor FlashContainer dan 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 >

Langkah 2: Tempatkan komponen FlashContainer di tata letak bash. Menambahkan tombol juga untuk menunjukkan aksi flash.

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

Contoh lengkap terlihat seperti:

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

Tata letak khusus

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

Di sini semua properti opsi yang telah Anda lewati karena Params akan mengakses melalui properti slot.

Lisensi

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