Vue项目中如何引入Toast插件

た入场券 2023-01-22 05:55 330阅读 0赞

> # `Vue项目中如何引入Toast插件` #

> ### `安装vue2-toast：` ###

npm install vue2-toast -S

> ### `在main.js中全局导入vue2-toast` ###

import 'vue2-toast/lib/toast.css';
    import Toast from 'vue2-toast';
    Vue.use(Toast);

> ### `或者自定义一下Toast的样式` ###

import 'vue2-toast/lib/toast.css';
    import Toast from 'vue2-toast';
    Vue.use(Toast, { 
        defaultType: 'center',
        duration: 3000,
        wordWrap: true,
        width: '350px',
        height: '200px'
    });

> ### `代码测试` ###

<template>
        <div id="app">
            <button @click="openTop()">top</button>
            <button @click="openCenter()">center</button>
            <button @click="openBottom()">bottom</button>
            <button @click="openLoading()">loading</button>
        </div>
    </template>
    
    
    export default { 
        methods:{ 
            openTop(){ 
                this.$toast.top('top');
            },
            openCenter(){ 
                this.$toast.center('center');
            },
            openBottom(){ 
                this.$toast('bottom');  // or this.$toast.bottom('bottom'); 
            },
            openLoading(){ 
                this.$loading('loading...');
                let self = this;
                setTimeout(function () { 
                  self.closeLoading()
                }, 2000)
            },
            closeLoading(){ 
                this.$loading.close();
            }
        }
    }

> ### `测试效果` ###

![在这里插入图片描述][20210518142510656.gif]

> ### `github地址` [https://github.com/lin-xin/vue-toast][https_github.com_lin-xin_vue-toast] ###

> ### `参考自：` ###

> [https://blog.csdn.net/qq\_37968920/article/details/81572401][https_blog.csdn.net_qq_37968920_article_details_81572401]

[20210518142510656.gif]: /images/20221020/e9153c8d2e354bea9876fcb0f92f8b1a.png
[https_github.com_lin-xin_vue-toast]: https://github.com/lin-xin/vue-toast
[https_blog.csdn.net_qq_37968920_article_details_81572401]: https://blog.csdn.net/qq_37968920/article/details/81572401