1、准备loading.js
import Vue from 'vue'
/**
* 插入loading
*/
const insertDom = (el) => {
let dom =
`<div class="el-loading-mask">
<div class="el-loading-spinner">
<svg viewBox="25 25 50 50" class="circular">
<circle cx="50" cy="50" r="20" fill="none" class="path"> </circle>
</svg>
<p class="el-loading-text">拼命加载中...</p>
</div>
</div>`;
//el添加相对定位
el.classList.add('el-loading-parent--relative')
// 插入到被绑定的元素内部
el.insertAdjacentHTML('afterbegin', dom);
}
/**
* 移除loading
*/
const removeDom = (el) => {
const ds = el.getElementsByClassName('el-loading-mask')[0];
if (ds) {
el.removeChild(ds);
el.classList.remove('el-loading-parent--relative')
}
}
// 更新是否显示
const toggleLoading = (el, binding) => {
if (binding.value) {
insertDom(el)
} else {
removeDom(el)
}
}
Vue.directive('loading', {
bind: function(el, binding, vnode) {
toggleLoading(el, binding)
},
//所在组件的 VNode 更新时调用--比较更新前后的值
update: function(el, binding) {
if (binding.oldValue !== binding.value) {
toggleLoading(el, binding)
}
}
})
2、准备loading.scss
/deep/ .el-loading-parent--relative {
position: relative !important
}
/deep/ .el-loading-mask {
position: absolute;
z-index: 2000;
background-color: rgba(0, 0, 0, .8);
margin: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
transition: opacity .3s;
.el-loading-spinner {
top: 50%;
margin-top: -21px;
width: 100%;
text-align: center;
position: absolute
}
.el-loading-spinner .el-loading-text {
color: #409eff;
margin: 3px 0;
font-size: 14px
}
.el-loading-spinner .circular {
height: 42px;
width: 42px;
animation: loading-rotate 2s linear infinite
}
.el-loading-spinner .path {
animation: loading-dash 1.5s ease-in-out infinite;
stroke-dasharray: 90, 150;
stroke-dashoffset: 0;
stroke-width: 2;
stroke: #409eff;
stroke-linecap: round
}
.el-loading-spinner i {
color: #409eff
}
.el-loading-fade-enter,
.el-loading-fade-leave-active {
opacity: 0
}
@keyframes loading-rotate {
to {
transform: rotate(1turn)
}
}
@keyframes loading-dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -40px
}
to {
stroke-dasharray: 90, 150;
stroke-dashoffset: -120px
}
}
}
3、将loading.scss引入通用样式文件
4、 在main.js引入loading.js
5、使用方式和elment-ui中v-loading的使用方式一致
效果如下: