Vue自定义Loading动画，自定义全局JS组件Loading动画【记录】

创建 Loading 目录

loading.vue 代码：

<template><div class="cus-loading" v-if="flag" @click.prevent.stop @touchstart.prevent.stop @touchmove.prevent.stop><div class="cus-loading-cont"><div class="cus-loading-cont-icon" v-show="iconFlag"><div class="cus-loading-cont-icon-spinner"><div class="cus-loading-cont-icon-rect1 rect"></div><div class="cus-loading-cont-icon-rect2 rect"></div><div class="cus-loading-cont-icon-rect3 rect"></div><div class="cus-loading-cont-icon-rect4 rect"></div><div class="cus-loading-cont-icon-rect5 rect"></div></div></div><div class="cus-loading-cont-txt" v-if="txtFlag">{{title}}</div></div></div>
</template><script>
export default {data(){return {flag: false,iconFlag: true,txtFlag: true,title: ''}},props: {},methods: {open(){this.flag = true},close(){this.flag = false},// 可以绑定这个阻止默认行为和冒泡，上边直接使用的修饰符stopPropagation(e){e.stopPropagation()e.preventDefault()return false}}
}
</script><style lang="scss" scoped>
.cus-loading{width: 100%;height: 100%;position: fixed;top:0;left:0;background: rgba(0,0,0,0.75);z-index: 99;.cus-loading-cont{width: 600px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);.cus-loading-cont-icon{margin-bottom: 24px;.cus-loading-cont-icon-spinner{margin: 0 auto;width: 120px;height: 60px;text-align: center;font-size: 10px;.rect{background-color: #F09C22;height: 100%;width: 6px;display: inline-block;-webkit-animation: stretchdelay 1.2s infinite ease-in-out;animation: stretchdelay 1.2s infinite ease-in-out;&.cus-loading-cont-icon-rect1{}&.cus-loading-cont-icon-rect2{-webkit-animation-delay: -1.1s;animation-delay: -1.1s;}&.cus-loading-cont-icon-rect3{-webkit-animation-delay: -1.0s;animation-delay: -1.0s;}&.cus-loading-cont-icon-rect4{-webkit-animation-delay: -0.9s;animation-delay: -0.9s;}&.cus-loading-cont-icon-rect5{-webkit-animation-delay: -0.8s;animation-delay: -0.8s;}}@-webkit-keyframes stretchdelay {0%, 40%, 100% { -webkit-transform: scaleY(0.4) }20% { -webkit-transform: scaleY(1.0) }}@keyframes stretchdelay {0%, 40%, 100% {transform: scaleY(0.4);-webkit-transform: scaleY(0.4);}  20% {transform: scaleY(1.0);-webkit-transform: scaleY(1.0);}}}}.cus-loading-cont-txt{text-align: center;color: #FFFFFF;font-size: 28px;letter-spacing: 2px;}}
}
</style>

index.js 代码

import Vue from 'vue'
import CusLoading from './loading.vue'const Loading = Vue.extend(CusLoading)CusLoading.install = function(options) {// console.log('options', options)/*** options的其他情况自行判断添加默认值等等*/let str = '伦家正在努力的整理数据哦 (〃▽〃)'if (options === undefined || options === null) {options = {flag: true,iconFlag: true,txtFlag: true,title: str}} else if (typeof options === 'string') {options = {flag: true,iconFlag: true,txtFlag: true,title: options}} else {options = {flag: options.flag !== undefined ? options.flag : true,iconFlag: options.iconFlag !== undefined ? options.iconFlag : true,txtFlag: options.txtFlag !== undefined ? options.txtFlag : true,title: options.title !== undefined ? options.title : str}}let instance = new Loading({data: options}).$mount()document.body.appendChild(instance.$el)return instance // 返回当前实例
}export default CusLoading

全局挂载：main.js

//自定义全局Loading组件
import CusLoading from './components/Loading'
Vue.prototype.$CusLoading = CusLoading.install;

使用：
注意：使用的时候就不需要引用了，因为在 main.js 里边已经挂载全局了，直接在 JS 里调用就行

// 直接默认值
let loading = this.$CusLoading()
setTimeout(() => {loading.close()
}, 1500)
// 手动打开 loading
let loading1 = this.$CusLoading({flag: false})
loading1.open() // 手动开启
setTimeout(() => {loading1.close()
}, 1500)
// 修改参数
let loading2 = this.$CusLoading({flag: false, // 关闭状态 true 为开启，可调用当前实例的 open 方法手动打开iconFlag: false, // 隐藏动画txtFlag: true, // 加载文案状态，false 为不展示title: '加载中' // 自定义加载文案
})
loading2.open() // 手动开启
setTimeout(() => {loading2.close() // 手动关闭
}, 1500)

Vue自定义Loading动画，自定义全局JS组件Loading动画【记录】相关推荐

html语音播放动画,html5 canvas+js音频可视化动画特效
html5 canvas+js实现的音频可视化动画特效,选择一首本地音频文件播放查看效果. 查看演示下载资源: 13 次下载资源下载积分: 20 积分 js代码 window.onload = ...
html5二维动画教程,H5+JS二维动画制作的一个实例
今天介绍一个网络上并不常用的插件two.js,刚开始学习的过程中,发现网上并没有合适的教程,在此发表基本操作 two.js是一款网页二维绘图软件,可以在指定区域内产生自设的各种动画效果下载网址如下: ...
android 漩涡动画,使用P5.js构造漩涡动画特效
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 var ticker = void 0; var positions = void 0; var nrOfC ...
js 和 css动画
js和css动画使用setTimeout()或者setInterval()使用这两个函数定时调用一段代码.这是其原理. 目的,重复修改内联样式,达到动画的效果通过在相同的时间内构造出一帧帧的内容, ...
js写css字体,js如何写出css动画？js写css动画的方法（代码）
本篇文章给大家带来的内容是关于js如何写出css动画 ?js写css动画的方法(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 使用setTimeout()或者setInter ...
html加入购物车的动画,关于购物车添加按钮的动画
html代码生成一个动画小球的div,并且生成五个小球,五个是为了生成一定数量的小球来作为操作使用,按照小球动画的速度,一般来说五个也可以保证有足够的小球数量来运行动画动画的内容分别是外层和内层, ...
vue 添加全局组件_自定义vue全局组件(Loading为例)
首先创建一个项目 vue init webpack-simple define-demo //define-demo 项目名称 cd define-demo npm install //安装本次所有需 ...
Vuejs自定义全局组件--loading
不管是使用框架,还是不使用任何的框架,我们都不可避免的需要与"加载中--"打交道,刚刚学习了Vuejs自定义组件的写法,就现学现卖,介绍一下吧! 先看一下目录结构,一般情况下,每一 ...
vue 定义全局弹框_VUE路由拦截：Vue自定义全局弹窗组件
前言在任何一个平台中,如果需要增加用户黏度,除了用户需要的基本内容外,用户登录注册提交信息也是非常重要的一环,可以了解用户基本信息,用户喜欢等. 抛出前后端混合开发外,vue可以轻松的实现路由拦截. ...

Vue自定义Loading动画，自定义全局JS组件Loading动画【记录】

Vue自定义Loading动画，自定义全局JS组件Loading动画【记录】相关推荐

最新文章

热门文章