创建 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)// 手动打开 loadinglet 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)
