Vue自定义全局Toast和Loading
如果我们的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的更多相关文章
- vue2 自定义全局组件(Loading加载效果)
vue2 自定义全局组件(Loading加载效果) github地址: https://github.com/ccyinghua/custom-global-component 一.构建项目 vue ...
- vue 自定义全局方法
import {myfun} from '../static/js/test.js' //se6的正确写法export default {methods:{ diyfun:function () { ...
- vue自定义全局和局部指令
一.介绍 1.除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令. 2.自定义指令的分类 1.全局指令 2.局部指令 3.自定义全局指令格式 V ...
- 11 vue 自定义全局方法
//global.js// 定义vue 全局方 // 定义vue 全局方法 建议自定义的全局方法加_ 以示区分 export default { install(Vue, options = ...
- vue中alert toast confirm loading 公用
import Vue from 'vue' import { ToastPlugin, AlertPlugin, ConfirmPlugin, LoadingPlugin } from 'vux' / ...
- vue自定义全局组件(自定义插件)
有时候我们在做开发的时候,就想自己写一个插件然后就可以使用自己的插件,那种成就感很强.博主最近研究element-ui和axios的时候,发现他们是自定义组件,但是唯一有一点不同的是,在用elemen ...
- Vue 自定义全局消息框组件
消息弹框组件,默认3秒后自动关闭,可设置info/success/warning/error类型 效果图: 文件目录: Message.vue <template> <transit ...
- vue自定义全局公共函数
单独零散的函数 在main.js里进行全局注册 Vue.prototype.ajax = function (){} 在所有组件里可调用 this.ajax() 多个函数定义在一个对象里 // xx. ...
- vue 自定义全局按键修饰符
在监听键盘事件时,我们经常需要检查常见的键值.Vue 允许为 v-on 在监听键盘事件时添加按键修饰符: JS部分: Vue.config.keyCodes = { f2:113, } var app ...
随机推荐
- Sqli-Labs 闯关 less 42-49
Less 42 这一关一进去看着像前面的二次注入.发现也注入不了.. 我们观察代码发现这一关用的是堆叠注入. 登陆的这里可以看到login_password登陆的时候并没有使用mysqli_real_ ...
- 01背包与完全背包(dp复习)
01背包和完全背包都是dp入门的经典,我的dp学的十分的水,借此更新博客的机会回顾一下 01背包:给定总容量为maxv的背包,有n件物品,第i件物品的的体积为w[i],价值为v[i],问如何选取才能是 ...
- 《Python学习手册 第五版》 -第11章 赋值、表达式和打印
上一章对Python的语句和语法已经进行了基本的说明,接下来就是每个章节的详细说明,本章的主要内容就是标题中涵盖的三点:赋值语句.表达式语句.打印语句 本章重点内容如下: 1.赋值语句 1)赋值语句的 ...
- 清晰架构(Clean Architecture)的Go微服务
我用Go和gRPC创建了一个微服务项目,并试图找出最好的程序结构,它可以作为我其他项目的模板.我还将程序设计和编程的最佳实践应用于Go Microservice程序,例如清晰架构(Clean Arch ...
- Scala 学习(10)之「集合 」
数组 定长数组 Array:采用()访问,而不是[],下标从 0 开始. val array1 = new Array[String](5) //创建数组 println(array1) //返回数组 ...
- 使用Python打造一款间谍程序
知识点 这次我们使用python来打造一款间谍程序 程序中会用到许多知识点,大致分为四块 win32API 此处可以在MSDN上查看 Python基础重点在cpytes库的使用,使用方法请点击此处 ...
- C#开源组件DocX版本区别点滴
在C#中,需要处理Office Word文档时,由于MsOffice Com的版本局限性,所以选择不与本机MsOffice安装与否或安装版本相关的软件,以便软件或使用时的通用性与版权限制,特别是对于国 ...
- shell 颜色输出
#!/bin/bash function display_method(){ clearDisplayMetho=0 if [ $displayMethod -eq 0 ]; then echo -e ...
- TCP协议可靠性是如何保证之滑动窗口,超时重发,序列号确认应答信号
原创文章首发于公众号:「码农富哥」,欢迎收藏和关注,如转载请注明出处! TCP 是一种提供可靠性交付的协议. 也就是说,通过 TCP 连接传输的数据,无差错.不丢失.不重复.并且按序到达. 但是在网络 ...
- springmvc maven idea 多模块开发(四):建立Web子模块
先建立web的父模块,其他子web模块建立在该父模块之下,该模块打包方式选择为pom 建立实际web模块,右键点击web-parent,建立方法同上,打包方式为war 建立好后的目录结构如下: 手工建 ...