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');
},
openLoading(){
this.$loading('loading...');
let self = this;
setTimeout(function () {
self.closeLoading()
}, 2000)
},
closeLoading(){
this.$loading.close();
}
}
}
测试效果
参考自:
https://blog.csdn.net/qq_37968920/article/details/81572401