vue3 headless flashダウンロード-VUE3 vue3 headless flashソースコードダウンロード

vue3 headless flash

FLASHソースコード

0.1.43

ダウンロード

Vue 3ヘッドレスフラッシュ（トースター）

ヘッドレスとは、デフォルトではCSSなしを指します。これにより、必要に応じてカスタムテンプレートでメッセージをフラッシュできます。

デモ：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 >