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 相关文章推荐
[原创]保存的js无法执行的解决办法
Feb 25 Javascript
js 中{},[]中括号,大括号使用详解
May 12 Javascript
js String对象中常用方法小结(字符串操作)
Jan 27 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
Jul 18 Javascript
jquery插件方式实现table查询功能的简单实例
Jun 06 Javascript
微信公众号支付H5调用支付解析
Nov 04 Javascript
解决vue axios的封装 请求状态的错误提示问题
Sep 25 Javascript
详解vue.js移动端配置flexible.js及注意事项
Apr 10 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
Jun 07 Javascript
vue路由 遍历生成复数router-link的例子
Oct 30 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
Jan 16 Javascript
JavaScript中reduce()的5个基本用法示例
Jul 19 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
substr()函数中文版
2006/10/09 PHP
PHP文章采集URL补全函数(FormatUrl)
2012/08/02 PHP
PHP中几种常见的超时处理全面总结
2012/09/11 PHP
PHP实现获取客户端IP并获取IP信息
2015/03/17 PHP
实例讲解如何在PHP的Yii框架中进行错误和异常处理
2016/03/17 PHP
jquery 弹出层注册页面等(asp.net后台)
2010/06/17 Javascript
ECMAScript 创建自己的js类库
2012/11/22 Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
2012/12/23 Javascript
JS保留两位小数 四舍五入函数的小例子
2013/11/20 Javascript
JavaScript中String.match()方法的使用详解
2015/06/06 Javascript
高性能JavaScript 重排与重绘(2)
2015/08/11 Javascript
浅谈使用MVC模式进行JavaScript程序开发
2015/11/10 Javascript
Javascript小技能总结(推荐)
2016/06/02 Javascript
浅谈jquery中使用canvas的问题
2016/10/10 Javascript
a标签置灰不可点击的实现方法
2017/02/06 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
2017/03/30 Javascript
vue.js单页面应用实例的简单实现
2017/04/10 Javascript
React教程之封装一个Portal可复用组件的方法
2018/01/02 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
2018/02/26 Javascript
浅谈Vue的响应式原理
2019/05/30 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
2019/07/23 Javascript
2款Python内存检测工具介绍和使用方法
2014/06/01 Python
python 全文检索引擎详解
2017/04/25 Python
python实现Windows电脑定时关机
2018/06/20 Python
python 去除txt文本中的空格、数字、特定字母等方法
2018/07/24 Python
对django2.0 关联表的必填on_delete参数的含义解析
2019/08/09 Python
pytorch 实现打印模型的参数值
2019/12/30 Python
Python使用扩展库pywin32实现批量文档打印实例
2020/04/09 Python
python 在sql语句中使用%s,%d,%f说明
2020/06/06 Python
CSS3制作圆角图片和椭圆形图片
2016/07/08 HTML / CSS
从一次项目重构说起CSS3自定义变量在项目的使用方法
2021/03/01 HTML / CSS
HTML5 Video/Audio播放本地文件示例介绍
2013/11/18 HTML / CSS
美国一家主营日韩美妆护肤品的在线商店:iMomoko
2016/09/11 全球购物
实验教师岗位职责
2014/02/13 职场文书
群众路线四风自我剖析材料
2014/10/08 职场文书
党的群众路线教育实践活动领导班子整改方案
2014/10/25 职场文书