element-ui中的loading的实际应用

Posted 2023-03-28

参考技术A 实际开发中，要如何指定loading在我们想要的区域加遮罩呢？
前提：
你已经引入element-ui，如下：
import ElementUI from 'element-ui'
import Loading from 'element-ui'

1、在vue的原型链上定义一个打开loading的方法：

2、在开始请求接口是调用改方法，因为我们是直接定义在VUE原型链上的方法，所以我们可以直接this调用

3、请求成功后执行关闭操作：

element-ui，InfiniteScroll 无限滚动， 无限加载load问题。

直接复制组件使用，会无限加载load。
解决方法： 为ul的父级div 添加style="overflow-y:hidden"

<template>
  <div style="overflow-y:hidden">
    <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
    <li v-for="i in count" class="infinite-list-item">{{ i }}</li>
  </ul>
  </div>

</template>

<script>
  export default {
    data () {
      return {
        count: 0
      }
    },
    methods: {
      load () {
        this.count += 2
      }
    }
  }
</script>