如果我们的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的更多相关文章

  1. vue2 自定义全局组件(Loading加载效果)

    vue2 自定义全局组件(Loading加载效果) github地址: https://github.com/ccyinghua/custom-global-component 一.构建项目 vue ...

  2. vue 自定义全局方法

    import {myfun} from '../static/js/test.js' //se6的正确写法export default {methods:{ diyfun:function () { ...

  3. vue自定义全局和局部指令

    一.介绍 1.除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令. 2.自定义指令的分类       1.全局指令 2.局部指令 3.自定义全局指令格式 V ...

  4. 11 vue 自定义全局方法

    //global.js// 定义vue 全局方   // 定义vue 全局方法 建议自定义的全局方法加_ 以示区分 export default {   install(Vue, options =  ...

  5. vue中alert toast confirm loading 公用

    import Vue from 'vue' import { ToastPlugin, AlertPlugin, ConfirmPlugin, LoadingPlugin } from 'vux' / ...

  6. vue自定义全局组件(自定义插件)

    有时候我们在做开发的时候,就想自己写一个插件然后就可以使用自己的插件,那种成就感很强.博主最近研究element-ui和axios的时候,发现他们是自定义组件,但是唯一有一点不同的是,在用elemen ...

  7. Vue 自定义全局消息框组件

    消息弹框组件,默认3秒后自动关闭,可设置info/success/warning/error类型 效果图: 文件目录: Message.vue <template> <transit ...

  8. vue自定义全局公共函数

    单独零散的函数 在main.js里进行全局注册 Vue.prototype.ajax = function (){} 在所有组件里可调用 this.ajax() 多个函数定义在一个对象里 // xx. ...

  9. vue 自定义全局按键修饰符

    在监听键盘事件时,我们经常需要检查常见的键值.Vue 允许为 v-on 在监听键盘事件时添加按键修饰符: JS部分: Vue.config.keyCodes = { f2:113, } var app ...

随机推荐

  1. java配置文件集

    <!-- 激活组件扫描功能,扫描aop的相关组件组件 --> <context:component-scan base-package="com.yingjun.ssm.a ...

  2. WeChall_Training: Get Sourced (Training)

    The solution is hidden in this page Use View Sourcecode to get it 解题: 网页源码,最后一行 <!-- You are look ...

  3. Codeforces 977D Divide by three, multiply by two(拓扑排序)

      Polycarp likes to play with numbers. He takes some integer number xx, writes it down on the board, ...

  4. 在.NET Core中使用MachineKey

    在.NET Core中使用MachineKey 姐妹篇:<ASP.NET Cookie是怎么生成的> 姐妹篇:<.NET Core验证ASP.NET密码> 在上篇文章中,我介绍 ...

  5. Apache Tomcat Ajp-CVE-2020-1938漏洞复现

    环境搭建: sudo docker pull duonghuuphuc/tomcat-8.5.32 sudo docker run -d -it -p 8080:8080 -p 8009:8009  ...

  6. 多图预警——从 RAID 到分布式系统中的副本分布

    原文首发于个人博客「tobe的呓语」欢迎大家的访问收藏啊~ 我们知道,在面对大规模数据的计算和存储时,有两种处理思路: 垂直扩展(scale up):通过升级单机的硬件,如 CPU.内存.磁盘等,提高 ...

  7. Charm Bracelet 一维01背包

    A - Charm Bracelet Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%lld & %llu Su ...

  8. VMware vCenter Server6.0安装及群集配置介绍

    在本项目中,将在VMware Workstation 模拟的Windows Server 2008 R2虚拟机中安装VMware vCenter Server ,并且使用vCenter Server捆 ...

  9. 不懂怎么创建可视化大屏?手把手教你使用数据可视化BI软件创建工厂车间数据监控大屏

    灯果数据可视化BI软件是新一代人工智能数据可视化大屏软件,内置丰富的大屏模板,可视化编辑操作,无需任何经验就可以创建属于你自己的大屏.大家可以在他们的官网下载软件.   本文以工厂车间数据监控大屏为例 ...

  10. Valiant Hearts: The Great War -- 《勇敢的心》

    “友情,爱情,亲情”