Vue自定义全局Toast和Loading的实例详解


Posted in Javascript onApril 18, 2019

如果我们的Vue项目中没有用到任何UI框架的话,为了更好的用户体验,肯定会用到loading和toast。那么我们就自定义这两个组件吧。

1、Toast组件

首先,在common下新建global文件夹,存放我们的toast.vue和toast.js两个文件(当然文件的具体位置你可以自行安排)。

(1). toast.vue

<template lang="html">
 <div v-if="isShowToast" class="toast-container" @touchmove.prevent>
  <!-- 这里content为双花括号 -->
  <span class="loading-txt">{content}</span>
 </div>
</template>

<script>
export default {
 data () {
  return {
   isShowToast: true,
   content: ''
  }
 }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.toast-container {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(255, 255, 255, 0.1);
}
.toast-msg {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 60%;
 padding: 35px;
 border-radius: 10px;
 font-size: 28px;
 line-height: 36px;
 background: #eee;
 color: #666;
}
</style>

(2). toast.js

import Vue from 'Vue'
import ToastComponent from './Toast.vue'

const Toast = {}
let showToast = false // 存储loading显示状态
let toastNode = null // 存储loading节点元素
const ToastConstructor = Vue.extend(ToastComponent)

Toast.install = function (Vue, options) {
 // 参数
 var opt = {
  duration: '1200'
 }
 for (var property in options) {
  opt[property] = options[property]
 }
 Vue.prototype.$toast = function (tips, type) {
  if (type === 'hide') {
   toastNode.isShowToast = showToast = false
  } else {
   if (showToast) {
    // 如果toast还在,则不再执行
    return
   }
   toastNode = new ToastConstructor({
    data: {
     isShowToast: showToast,
     content: tips
    }
   })
   toastNode.$mount() // 挂在实例,为了获取下面的toastNode.$el
   document.body.appendChild(toastNode.$el)
   toastNode.isShowToast = showToast = true
   setTimeout(function () {
    toastNode.isShowToast = showToast = false
   }, opt.duration)
  }
 };

 ['show', 'hide'].forEach(function (type) {
  Vue.prototype.$toast[type] = function (tips) {
   return Vue.prototype.$toast(tips, type)
  }
 })
}

export default Toast

然后,我们需要把写好的组件在 /src/main.js 中引用一下。

import Toast from './components/common/global/toast'
Vue.use(Toast)

最后,怎么使用呢?只需在要用的地方this.$toast.show('hello world')

2、Loading组件

loading组件只需要照着toast组件搬过来,稍微改下就可以了。

首先,在common下新建global文件夹,存放我们的loading.vue和loading.js两个文件。

(1). loading.vue

<template lang="html">
 <div v-if="isShowLoading" class="loading-container">
  <div class="loading-box">
   <img class="loading-img" :src="require('../../../assets/images/loading.png')">
   <!-- 这里content为双花括号 -->
   <span class="loading-txt">{content}</span>
  </div>
 </div>
</template>

<script>
export default {
 data () {
  return {
   isShowLoading: false,
   content: ''
  }
 }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.loading-container {
 display: flex;
 justify-content: center;
 align-items: center;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0);
 z-index: 1000;
}
.loading-box {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 width: 150px;
 height: 150px;
 border-radius: 10px;
 background: #e5e5e5;
}
.loading-img {
 width: 70px;
 height: 70px;
 animation: rotating 2s linear infinite;
}
@keyframes rotating {
 0% {
  transform: rotate(0deg);
 }
 100% {
  transform: rotate(1turn);
 }
}
.loading-txt {
 display: flex;
 justify-content: center;
 align-items: center;
 font-size: 24px;
 color: #666;
}
</style>

(2). loading.js

import Vue from 'Vue'
import LoadingComponent from './Loading.vue'

const Loading = {}
let showLoading = false // 存储loading显示状态
let loadingNode = null // 存储loading节点元素
const LoadingConstructor = Vue.extend(LoadingComponent)

Loading.install = function (Vue) {
 Vue.prototype.$loading = function (tips, type) {
  if (type === 'hide') {
   loadingNode.isShowLoading = showLoading = false
  } else {
   if (showLoading) {
    // 如果loading还在,则不再执行
    return
   }
   loadingNode = new LoadingConstructor({
    data: {
     isShowLoading: showLoading,
     content: tips
    }
   })
   loadingNode.$mount() // 挂在实例,为了获取下面的loadingNode.$el
   document.body.appendChild(loadingNode.$el)
   loadingNode.isShowLoading = showLoading = true
  }
 };

 ['show', 'hide'].forEach(function (type) {
  Vue.prototype.$loading[type] = function (tips) {
   return Vue.prototype.$loading(tips, type)
  }
 })
}

export default Loading

然后,在 /src/main.js 中引用一下loading组件。

import Loading from './components/common/global/loading'
Vue.use(Loading)

最后,只需在要用的地方this.$loading.show('hello world')、 this.$loading.hide()

总结

以上所述是小编给大家介绍的Vue自定义全局Toast和Loading的实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
Js实现自定义右键行为
Mar 26 Javascript
详解Javascript事件驱动编程
Jan 03 Javascript
js原生Ajax的封装和原理详解
Mar 11 Javascript
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
BootStrap Validator 根据条件在JS中添加或移除校验操作
Oct 12 Javascript
纯js封装的ajax功能函数与用法示例
May 14 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
Jun 11 Javascript
微信小程序实现评论功能
Nov 28 Javascript
Vue.js中的组件系统
May 30 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
Nov 04 Javascript
微信小程序select下拉框实现源码
Nov 08 Javascript
jQuery实现可以计算进制转换的计算器
Oct 19 jQuery
javascript数据类型中的一些小知识点(推荐)
Apr 18 #Javascript
在element-ui的select下拉框加上滚动加载
Apr 18 #Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
Apr 17 #Javascript
vue模式history下在iis中配置流程
Apr 17 #Javascript
详解Vue 全局变量,局部变量
Apr 17 #Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
Apr 17 #Javascript
Angular Excel 导入与导出的实现代码
Apr 17 #Javascript
You might like
PHP与javascript的两种交互方式
2006/10/09 PHP
PHP新手上路(十三)
2006/10/09 PHP
php 全局变量范围分析
2009/08/07 PHP
php中的curl_multi系列函数使用例子
2014/07/29 PHP
codeigniter显示所有脚本执行时间的方法
2015/03/21 PHP
浅析php如何实现App常用的秒发功能
2016/08/03 PHP
PHP实现随机发放扑克牌
2020/04/21 PHP
新页面打开实际尺寸的图片
2006/08/25 Javascript
url 编码 js url传参中文乱码解决方案
2010/04/11 Javascript
jquery 日期分离成年月日的代码
2010/05/14 Javascript
图片轮换效果实现代码(点击按钮停止执行)
2013/04/12 Javascript
JavaScript中匿名、命名函数的性能测试
2014/09/04 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
2014/10/16 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
2015/11/01 Javascript
JQuery实现简单的图片滑动切换特效
2015/11/22 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
2016/01/19 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
2016/05/20 Javascript
温习Javascript基础语法之词法结构
2016/05/31 Javascript
BootStrap glyphicon图标无法显示的解决方法
2016/09/06 Javascript
微信公众号 客服接口的开发实例详解
2016/09/28 Javascript
浅谈AngularJS中ng-class的使用方法
2016/11/11 Javascript
实例介绍JavaScript中多种组合继承
2019/01/20 Javascript
Vue开发之封装分页组件与使用示例
2019/04/25 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
2019/06/19 Javascript
js实现多个标题吸顶效果
2020/01/08 Javascript
[04:03]DOTA2英雄梦之声_第02期_风暴之灵
2014/06/30 DOTA
flask + pymysql操作Mysql数据库的实例
2017/11/13 Python
python绘制中国大陆人口热力图
2018/11/07 Python
python+pyqt5实现图片批量缩放工具
2019/03/18 Python
一款利用css3的鼠标经过动画显示详情特效的实例教程
2014/12/29 HTML / CSS
美国庭院家具购物网站:AlphaMarts
2019/04/10 全球购物
自我鉴定怎么写
2014/01/12 职场文书
保护环境倡议书500字
2014/05/19 职场文书
学生会生活部工作总结2015
2015/03/31 职场文书
2015年全民创业工作总结
2015/07/23 职场文书
Python实现照片卡通化
2021/12/06 Python