vue教程之toast弹框全局调用示例详解


Posted in Javascript onAugust 24, 2020

本文实例为大家分享了vue toast弹框全局调用示例,供大家参考,具体内容如下

1.首选新建一个toast.vue模板文件:

<template>
 <transition :name="fadeIn">
 <div class="alertBox" v-show="show">
  <div class="alert-mask" v-show="isShowMask"></div>
  <transition :name="translate">
  <div class="box" :class="position" v-show="show">
   {{text}}
  </div>
  </transition>
 </div>
 </transition>
</template>

<script>
export default {
 data() {
 return {
 }
 },
 props: {
 show: { // 是否显示此toast
  default: false
 },
 text: { // 提醒文字
  default: 'loading'
 },
 position: { // 提醒容器位置
  default: 'center'
 },
 isShowMask: { // 是否显示遮罩层
  default: false
 },
 time: { // 显示时间
  default: 1500
 },
 transition: { // 是否开启动画
  default: true
 }
 },
 mounted() { // 时间控制
 setTimeout(() => {
  this.show = false
 }, this.time)
 },
 computed: {
 translate() { // 根据props,生成相对应的动画
  if (!this.transition) {
  return ''
  } else {
  if (this.position === 'top') {
   return 'translate-top'
  } else if (this.position === 'middle') {
   return 'translate-middle'
  } else if (this.position === 'bottom') {
   return 'translate-bottom'
  }
  }
 },
 fadeIn() { // 同上
  if (!this.transition) {
  return ''
  } else {
  return 'fadeIn'
  }
 }
 }
}
</script>

<style>
 .box{
 position: fixed;
 top: 50%;
 left: 50%;
 width: 100px;
 height: 100px;
 margin-left: -50px;
 margin-top: -50px;
 background: rgba(0,0,0,.5);
 text-align: center;
 line-height: 100px;
 color: #fff;
 font-size: 16px;
 z-index: 5000;
 color: #fff;
 }
 .box.top{
 top: 50px;
 margin-top: 0;
 }
 .box.center{
 top: 50%;
 margin-top: -100px;
 }
 .box.bottom{
 top: auto;
 bottom: 50px;
 margin-top: 0;
 }
 .alert-mask{
 position: fixed;
 left: 0;
 top: 0;
 bottom: 0;
 right: 0;
 background: rgba(0,0,0,.5);
 z-index: 4999;
 }
 .fadeIn-enter-active, .fadeIn-leave-active{
 transition: opacity .3s;
 }
 .fadeIn-enter, .fadeIn-leave-active{
 opacity: 0;
 }
 .translate-top-enter-active, .translate-top-leave-active{
 transition: all 0.3s cubic-bezier(.36,.66,.04,1);
 }
 .translate-top-enter, .translate-top-leave-active{
 transform: translateY(-50%);
 opacity: 0;
 }
 .translate-middle-enter-active, .translate-middle-leave-active{
 transition: all 0.3s cubic-bezier(.36,.66,.04,1);
 }
 .translate-middle-enter, .translate-middle-leave-active{
 transform: translateY(80%);
 opacity: 0;
 }
 .translate-bottom-enter-active, .translate-bottom-leave-active{
 transition: all 0.3s cubic-bezier(.36,.66,.04,1);
 }
 .translate-bottom-enter, .translate-bottom-leave-active{
 transform: translateY(100%);
 opacity: 0;
 }
</style>

2.主逻辑在toast.js里完成:

var Alert = require('./index.vue') // 引入vue模板
var Toast = {} // 定义插件对象
Toast.install = function (Vue, options) { // vue的install方法,用于定义vue插件
 // 如果toast还在,则不再执行
 if(document.getElementsByClassName('alertBox').length){ 
  return
 }
 let toastTpl = Vue.extend(Alert) // 创建vue构造器
 // el:提供一个在页面上已存在的DOM元素作为Vue实例的挂载目标。可以是css选择器,也可以是HTMLElement实例。
 // 在实例挂载之后,可以通过$vm.$el访问。
 // 如果这个选项在实例化时有用到,实例将立即进入编译过程。否则,需要显示调用vm.$mount()手动开启编译(如下)
 // 提供的元素只能作为挂载点。所有的挂载元素会被vue生成的dom替换。因此不能挂载在顶级元素(html, body)上
 // let $vm = new toastTpl({
 // el: document.createElement('div')
 // })
 let $vm = new toastTpl() // 实例化vue实例
 // 此处使用$mount来手动开启编译。用$el来访问元素,并插入到body中
 let tpl = $vm.$mount().$el
 document.body.appendChild(tpl)

 Vue.prototype.$toast = { // 在Vue的原型上添加实例方法,以全局调用
 show(options) { // 控制toast显示的方法
  if (typeof options === 'string') { // 对参数进行判断
  $vm.text = options // 传入props
  }
  else if (typeof options === 'object') {
  Object.assign($vm, options) // 合并参数与实例
  }
  $vm.show = true // 显示toast
 },
 hide() { // 控制toast隐藏的方法
  $vm.show = false
 }
 }
}
export default Toast; // 导出Toast(注意:此处不能用module exports导出,在一个文件中,不能同时使用require方式引入,而用module exports导出,两种方式不能混用)

使用:

在vue项目的主文件中,引入插件,并进行安装:

vue教程之toast弹框全局调用示例详解

这样在项目的任何组件里,都可以使用这个toast的弹窗插件了:

vue教程之toast弹框全局调用示例详解

想要更高级的插件学习源码,请移步vux进行源码学习

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript的面向对象(二)
Nov 09 Javascript
使用正则替换变量
May 05 Javascript
JQuery优缺点分析说明
Jun 09 Javascript
jquery实现一个简单好用的弹出框
Sep 26 Javascript
Javascript基础教程之JavaScript语法
Jan 18 Javascript
jQuery简单实现图片预加载
Apr 20 Javascript
javascript生成随机数方法汇总
Nov 12 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
Mar 07 Javascript
js实现城市级联菜单的2种方法
Jun 23 Javascript
vue实现模态框的通用写法推荐
Feb 26 Javascript
JavaScript使用math.js进行精确计算操作示例
Jun 19 Javascript
JS实现的简单分页功能示例
Aug 23 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
Aug 14 #Javascript
jQuery实现手势解锁密码特效
Aug 14 #jQuery
Vue+Element使用富文本编辑器的示例代码
Aug 14 #Javascript
带你快速理解javascript中的事件模型
Aug 14 #Javascript
JS获取子、父、兄节点方法小结
Aug 14 #Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
Aug 14 #Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
Aug 14 #Javascript
You might like
PHP中使用Session配合Javascript实现文件上传进度条功能
2014/10/15 PHP
php字符串分割函数用法实例
2015/03/17 PHP
php使用curl模拟浏览器表单上传文件或者图片的方法
2018/11/10 PHP
Yii框架小部件(Widgets)用法实例详解
2020/05/15 PHP
fix-ie5.js扩展在IE5下不能使用的几个方法
2007/08/20 Javascript
Javascript学习笔记9 prototype封装继承
2010/01/11 Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
2011/03/10 Javascript
jquery高级编程的最佳实践详解
2014/03/23 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
2014/06/20 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
2016/01/26 Javascript
JavaScript禁止复制与粘贴的实现代码
2016/05/16 Javascript
Bootstrap3制作搜索框样式的方法
2016/07/11 Javascript
JavaScript 中有关数组对象的方法(详解)
2016/08/15 Javascript
浅谈js中StringBuffer类的实现方法及使用
2016/09/02 Javascript
Angular ui.bootstrap.pagination分页
2017/01/20 Javascript
JS实现元素上下左右移动效果
2017/10/18 Javascript
nodejs中方法和模块用法示例
2018/12/24 NodeJs
jquery+css实现Tab栏切换的代码实例
2019/05/14 jQuery
vue实现行列转换的一种方法
2019/08/06 Javascript
vue项目中定义全局变量、函数的几种方法
2019/11/08 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
2020/05/23 Javascript
vue 点击其他区域关闭自定义div操作
2020/07/17 Javascript
vue实现图片裁剪后上传
2020/12/16 Vue.js
详解vite2.0配置学习(typescript版本)
2021/02/25 Javascript
基于python list对象中嵌套元组使用sort时的排序方法
2018/04/18 Python
Python中的字符串切片(截取字符串)的详解
2019/05/15 Python
python 解决mysql where in 对列表(list,,array)问题
2020/06/06 Python
使用Python实现音频双通道分离
2020/12/25 Python
CSS3伪类选择器:nth-child()
2009/04/02 HTML / CSS
思想专业自荐信范文
2013/12/25 职场文书
党员干部群众路线个人整改措施
2014/09/18 职场文书
销售代理协议书
2014/09/30 职场文书
2014年单位工作总结范文
2014/11/27 职场文书
社区扶贫帮困工作总结
2015/05/20 职场文书
2015年教研工作总结
2015/05/23 职场文书
2019暑假学生安全口号
2019/06/27 职场文书