Vue项目中如何引入Toast插件

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();
        }
    }
}

测试效果

github地址 https://github.com/lin-xin/vue-toast

参考自：

https://blog.csdn.net/qq_37968920/article/details/81572401