vue h5 v-loading封装
let mask = null
function stop (e) {
e.preventDefault()
}
function createLoading () {
if(mask) return
mask = document.createElement('div')
mask.setAttribute('id', 'loading-mask')
let img = new Image()
// gif 加载从收帧开始
img.src = require('../assets/images/loading.gif') + `?=time=${+ new Date()}`
img.className = 'v-loading'
mask.appendChild(img)
document.body.appendChild(mask)
// 阻止冒泡，防止加载中点击
document.body.style.overflow='hidden';
document.addEventListener("touchmove", stop,{passive:false});//禁止页面滑动
}
function removeLoading () {
let oldLoading = mask
if (oldLoading) {
document.body.style.overflow='';//出现滚动条
document.removeEventListener("touchmove", stop,{passive:false});
mask = null
return document.body.removeChild(oldLoading)
}
}
export default {
bind (el, binding, vnode) {
if(binding.value) {
createLoading()
}
},
//数据更新的时候绑定
update (el,binding,vnode) {
console.log('update')
// let ctx = vnode.context;
if(binding.value) {
createLoading()
} else {
removeLoading()
}
},
unbind (el,binding,vnode) {
console.log('unbind')
if(binding.value) {
removeLoading()
}
}
}
全局css设置
#loading-mask {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
}
.v-loading {
width: 0.86rem;
height: 0.7rem;
}
loading图定位在最中间
