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、效果:
希望大佬看到有不对的地方,提出博主予以改正!