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 相关文章推荐
代码生成器 document.write()
Apr 15 Javascript
JavaScript游戏之是男人就下100层代码打包
Nov 08 Javascript
分享一个自己动手写的jQuery分页插件
Aug 28 Javascript
jQuery中:checked选择器用法实例
Jan 04 Javascript
Javascript核心读书有感之表达式和运算符
Feb 11 Javascript
JavaScript实现复制文章自动添加版权
Aug 02 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
Nov 05 Javascript
layui表格数据重载
Jul 27 Javascript
js中offset,client , scroll 三大元素知识点总结
Sep 11 Javascript
Layui动态生成select下拉选择框不显示的解决方法
Sep 24 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
Feb 06 Javascript
Openlayers实现图形绘制
Sep 28 Javascript
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
很实用的一个完整email发送程序
2006/10/09 PHP
dedecms 批量提取第一张图片最为缩略图的代码(文章+软件)
2009/10/29 PHP
实用的简单PHP分页集合包括使用方法
2013/10/21 PHP
php 判断字符串中是否包含html标签
2014/02/17 PHP
PHP7 新特性详细介绍
2016/09/06 PHP
PHP基于MySQLI函数封装的数据库连接工具类【定义与用法】
2017/08/11 PHP
Laravel的Auth验证Token验证使用自定义Redis的例子
2019/09/30 PHP
Prototype1.6 JS 官方下载地址
2007/11/30 Javascript
javascript+mapbar实现地图定位
2010/04/09 Javascript
再谈javascript图片预加载技术(详细演示)
2011/03/12 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
2013/11/08 Javascript
js数组循环遍历数组内所有元素的方法
2014/01/18 Javascript
JavaScript实现简单图片滚动附源码下载
2014/06/17 Javascript
javascript编写实用的省市选择器
2015/02/12 Javascript
自定义刻度jQuery进度条及插件
2015/09/02 Javascript
详解JavaScript节流函数中的Throttle
2016/07/16 Javascript
详谈jQuery中的一些正则匹配表达式
2017/03/08 Javascript
js 只比较时间大小的实例
2017/10/26 Javascript
nodejs高大上的部署方式(PM2)
2018/09/11 NodeJs
浅谈vue加载优化策略
2019/03/19 Javascript
解决layui表格的表头不滚动的问题
2019/09/04 Javascript
vue 中几种传值方法(3种)
2019/11/12 Javascript
浅析Python中MySQLdb的事务处理功能
2016/09/21 Python
Python之ReportLab绘制条形码和二维码的实例
2018/01/15 Python
在python中只选取列表中某一纵列的方法
2018/11/28 Python
美国最大的骑马用品零售商:HorseLoverZ
2017/01/12 全球购物
英国布鲁姆精品店:Bloom Boutique
2018/03/01 全球购物
MaBelle玛贝尔香港官网:香港钻饰连锁店
2019/09/09 全球购物
《风娃娃》教学反思
2014/04/19 职场文书
2014年化验室工作总结
2014/11/21 职场文书
北京故宫导游词
2015/01/31 职场文书
2015年优质护理服务工作总结
2015/04/08 职场文书
十七岁的单车观后感
2015/06/12 职场文书
《月光曲》教学反思
2016/02/16 职场文书
2016优秀护士先进个人事迹材料
2016/02/25 职场文书
教你使用RustDesk 搭建一个自己的远程桌面中继服务器
2022/08/14 Servers