zoukankan      html  css  js  c++  java
  • Vue element-ui 使用Loading服务按需引入的坑

    前言

    因为开发组件,需要按需引入element-ui的组件,但是v-loading如果按需引入就需要使用element-ui提供的Loading服务来实现,具体属性和用法可以到官网查看,本文记录一下自己使用过程中的一个坑。

    简单使用

    全屏加载的方式很简单,不需要参数即可实现,这里讲一下局部加载loading时的简单用法

    <template>
      <div class="component">
        <div class="header">header</div>
        <div class="main">
          <div class="content1">content1</div>
          <div class="content2">content2</div>
        </div>
        <div class="footer">footer</div>
      </div>
    </template>
    
    <script>
    // 引入Loading
    import { Loading } from 'element-ui'
    export default {
      data() {
        return {
          loading: null
        }
      },
      created() {
        this.getData()
      },
      methods: {
        // 获取接口数据
        getData() {
          // 在需要加载的时候使用如下方法,如果不需要频繁加载,直接写到mounted钩子函数即可
          this.loading && this.loading.close() // 这里是为了防止还没有请求结束(loading未关闭)再次连续触发
          this.loading = Loading.service({
            // 这里可以直接使用选择器名称,当然也可以用ref获取DOM结构,可以提前把DOM结构缓存起来,这样频繁被触发的时候是不是就不会重新获取DOM了呢?好像可以提升一丢丢性能吧(个人理解)
            target: '.content2' 
          })
          // 获取数据的接口
          getData().then(res => {
            // 关闭loading
            this.loading.close()
          })
        }
      }
    }
    </script>
    
    <style lang="less">
    .component{
      // 这里需要给局部加载loading的地方添加相对定位
      .content2{
        position: relative;
      }
    }
    <style>
    

    这里的重点其实是需要给局部加载的元素添加相对定位,因为初次加载不会出现问题,但是当你把网速放慢,频繁获取数据时就会出现loading定位不准的情况,通常是被定位到了自己的上层有定位的父元素(绝对定位的知识)

    完结~
  • 相关阅读:
    LAMP的搭建
    Apache安装之后,在浏览器输入ip无法访问
    DNS无法区域传送(axfr,ixfr)
    you do not permission to access / no this server
    http虚拟主机的简单配置训练
    搭建一个简单的dns缓存服务器
    Django——User-Profile
    Django——信号
    Django——中间件
    Django——日志
  • 原文地址:https://www.cnblogs.com/lwlblog/p/13826891.html
Copyright © 2011-2022 走看看