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地址/lin-xin/vue-toast

参考自：

/qq_37968920/article/details/81572401