vue3 headless flash

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组件放入Bash布局中。还添加一个按钮以演示闪存动作。

< 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