vue3 headless flash

Vue 3 헤드리스 플래시 (토스터)

헤드리스는 기본적으로 전혀 CS를 의미하지 않습니다. 원하는대로 사용자 정의 템플릿으로 메시지를 플래시 할 수 있습니다.

데모 : https://vue3-headless-flash.netlify.app/

설치

yarn add vue3-headless-flash

용도

기본 용도

1 단계 : FlashContainer 및 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 >

2 단계 : FlashContainer 구성 요소를 배쉬 레이아웃에 배치합니다. 플래시 동작을 보여주기 위해 버튼을 추가합니다.

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

완전한 예제는 다음과 같습니다.

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

맞춤형 레이아웃

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

여기서 매개 변수로 전달한 모든 옵션 속성은 슬롯의 속성을 통해 액세스합니다.

특허

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