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

Vue项目中如何引入Toast插件相关推荐

在已有vue项目中半途引入cube ui组件库的使用遇到的坑(血泪)
直接进入正题(我这儿是属于cube-ui普通编译) 1,在你的vue项目中找到package.json文件安装cube-ui 终端输入命令 npm install cube-ui --save 2 ...
如何在vue项目中使用lodop打印插件
如何在vue项目中使用lodop打印插件 - 简书先写了个webdemo <%--Created by IntelliJ IDEA.User: AdministratorDate: 2018/ ...
Vue项目中，引入阿里矢量图标库
Vue项目中,引入阿里矢量图标库 (1)阿里矢量图标库地址(需要登录): https://www.iconfont.cn (2)找到自己心仪的图标: (3)添加入库: (4)点击购物车图标(免费的哦) ...
vue项目中常用的优秀插件库
1. vue的ui框架: pc端UI框架:iview,element-ui 移动端UI框架:参考https://www.jianshu.com/p/c3c671787d1d 2. vue的数字动画插件 ...
vue之猫眼json数据的获取直接用于自己的vue项目中,swiper轮播插件的坑
vue之猫眼json数据的获取直接用于自己的vue项目中遇到问题总结: 加载不出猫眼数据,无法调用,数据被限制猫眼电影图片的拼接及删除问题 swiper的迷幻坑** 首先来说一下第一问题加载不出 ...
vue 项目中分别使用 vue-pdf 插件和内嵌 iframe 实现 PDF 文件预览，缩放，旋转，下载，保存等功能？
需求:在 vue 和 element-ui 项目中,有点击按钮预览,下载,打印 PDF 文件需求,要求支持 PDF 的预览,上下页切换,首尾页切换,页码选择跳转,放大缩小,顺时针逆时针旋转,下载, ...
记录Vue项目中使用的各插件
记录项目 package.json 文件中各插件的使用 : 目录 1.axios 2.babel-polyfill 3.core-js 4.echarts 5.element-ui 6.es6-p ...
详解如何在vue项目中使用lodop打印插件,以及样式打印预览缺失的问题（底部）
C-Lodop是一个免费云服务程序,可接受来自其它平台浏览器的JavaScrip语句实现远程打印. 目前是各家软件公司进行手机或微信远程打印的流行解决方案. 和其它"云打印"概念相 ...
2021-11-26 vue项目中如何引入iconfont图标库
1.下载在iconfont官网上下载选好的项目中的图标,解压获得一个文件夹,复制其中的文件到vue项目的assets/iconfont文件夹下 2.引入在main.js中引入import '@/a ...

Vue项目中如何引入Toast插件

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

`安装vue2-toast：`

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

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

`代码测试`

`测试效果`

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

`参考自：`

Vue项目中如何引入Toast插件相关推荐

最新文章

热门文章

Vue项目中如何引入Toast插件

Vue项目中如何引入Toast插件

安装vue2-toast：

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

或者自定义一下Toast的样式

代码测试

测试效果

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

参考自：

Vue项目中如何引入Toast插件相关推荐

最新文章

热门文章

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

`安装vue2-toast：`

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

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

`代码测试`

`测试效果`

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

`参考自：`