uniapp使用v-loading并且不引入element-ui的操作方法

 更新时间:2022年10月19日 10:34:07   作者:zaijinyang  
这篇文章主要介绍了uniapp使用v-loading并且不引入element-ui,首先创建loading.js,创建lloading.scss,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue-cli下的vuex的简单Demo图解(实现加1减1操作)

    vue-cli下的vuex的简单Demo图解(实现加1减1操作)

    这篇文章主要介绍了vue-cli下的vuex的简单Demo(实现加1减1操作),本文图文并茂给大家介绍的非常详细,具有参考借鉴价值,需要的朋友可以参考下
    2018-02-02
  • vue实现的树形结构加多选框示例

    vue实现的树形结构加多选框示例

    这篇文章主要介绍了vue实现的树形结构加多选框,结合实例形式分析了在之前递归组件实现vue树形结构的基础之上再加上多选框功能相关操作技巧,需要的朋友可以参考下
    2019-02-02
  • vue 列表页跳转详情页获取id以及详情页通过id获取数据

    vue 列表页跳转详情页获取id以及详情页通过id获取数据

    这篇文章主要介绍了vue 列表页跳转详情页获取id以及详情页通过id获取数据,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • 详解Vue组件插槽的使用以及调用组件内的方法

    详解Vue组件插槽的使用以及调用组件内的方法

    在本篇文章里我们给大家分享了Vue组件插槽的使用以及调用组件内的方法相关知识点,有需要的朋友们参考下。
    2018-11-11
  • Vue解读之响应式原理源码剖析

    Vue解读之响应式原理源码剖析

    Vue 最独特的特性之一,是其非侵入性的响应式系统,下面这篇文章主要给大家介绍了关于Vue响应式原理源码剖析的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2021-10-10
  • vue2如何实现vue3的teleport

    vue2如何实现vue3的teleport

    这篇文章主要介绍了vue2如何实现vue3的teleport,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • VUE中鼠标滚轮使div左右滚动的方法详解

    VUE中鼠标滚轮使div左右滚动的方法详解

    这篇文章主要给大家介绍了关于VUE中鼠标滚轮使div左右滚动的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • 前端低代码form-generator实现及新增自定义组件详解

    前端低代码form-generator实现及新增自定义组件详解

    这篇文章主要给大家介绍了关于前端低代码form-generator实现及新增自定义组件的相关资料,form-generator是一个开源的表单生成器,可以帮助我们快速构建各种表单页面,需要的朋友可以参考下
    2023-11-11
  • 详解vue-cli快速构建vue应用并实现webpack打包

    详解vue-cli快速构建vue应用并实现webpack打包

    这篇文章主要介绍了详解vue-cli快速构建vue应用并实现webpack打包,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • 详解基于 axios 的 Vue 项目 http 请求优化

    详解基于 axios 的 Vue 项目 http 请求优化

    这篇文章主要介绍了详解基于 axios 的 Vue 项目 http 请求优化,非常具有实用价值,需要的朋友可以参考下
    2017-09-09

最新评论