uniapp使用v-loading并且不引入element-ui的操作方法
短信预约 -IT技能 免费直播动态提醒
1、创建loading.js
import Vue from 'vue';
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);
};
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内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341