uniapp使用v-loading并且不引入element-ui的操作方法
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、创建lloading.scss
/deep/ .el-loading-parent--relative {
position: relative !important;
}
/deep/ .el-loading-mask {
position: absolute;
z-index: 2000;
background-color: rgba(0, 0, 0, 0.8);
margin: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
transition: opacity 0.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、将scss引入通用样式（一般在uni.scss中引入）
@import '/static/css/loading.scss';
4、在main.js中引入loading.scss
// 使用v-loading
import Loading from '@/utils/loading.js'
Vue.use(Loading)
5、页面上使用
<view class="details-video" v-loading="loading"></view>
6、效果：
到此这篇关于uniapp使用v-loading并且不引入element-ui的文章就介绍到这了,更多相关uniapp使用v-loading内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！
相关文章
Ramya
2020-01-01
Serwa
2020-03-20
Rae
2023-07-22
Rhoda
2023-07-22
Hester
2023-07-22
Grace
2023-07-22
Vanna
2023-07-22
Peony
2023-07-22
Dorothy
2023-07-22
Dulcea
2023-07-22
Zandra
2023-07-22
Serafina
2023-07-24
Kathy
2023-08-08
Olivia
2023-08-08
Elina
2023-08-08
Jacinthe
2023-08-08
Viridis
2023-08-08
Hana
2023-08-08