Sky_Tsumugi 2022-05-07 18:29 采纳率: 73.3%
浏览 60
已结题

element loding 的使用

问题遇到的现象和发生背景

需求: 一个详情弹窗,打开时开启加载动画,请求回填完数据后,取消加载动画

问题: 两种情况,

    情况一,加载中屏幕未锁定,可以滚动,并且下面为被遮罩填充
    相关代码
<el-dialog
      title="用户详细信息页"
      :visible.sync="props.visible"
      width="1000px"
      v-loading.="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      :before-close="close"
    >
   ......
    </el-dialog>


onMounted(async () => {
        await getUser()
        await getCustom()
        await getStb()
        await getPackageInfo(1)
        await getPackageInfo(2)
        loading.value = false
      })

情况一截图

img

情况二,加载中屏幕锁定,不能滚动,但遮罩下面弹窗以外的元素都消失了

    相关代码
<el-dialog
      title="用户详细信息页"
      :visible.sync="props.visible"
      width="1000px"
      v-loading.fullscreen.lock="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      :before-close="close"
    >
   ......
    </el-dialog>


onMounted(async () => {
        await getUser()
        await getCustom()
        await getStb()
        await getPackageInfo(1)
        await getPackageInfo(2)
        loading.value = false
      })

情况二截图

我的解答思路和尝试过的方法

我猜想应该是loading全局使用的是一个服务引起的,但并没有发现是和那里起了冲突,页面其他位置此刻也没有使用loading,请问具体是什么原因导致的,改如何解决呢?

  • 写回答

4条回答 默认 最新

  • web修理工 2022-05-09 19:28
    关注

    1.首先你的情况我这边没有发现

    img

    2.你可以这样尝试 watch 监听loading 为ture 是 获取document.body.overflow='hidden' 为false 是document.body.overflow='visible'

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

问题事件

  • 系统已结题 5月21日
  • 已采纳回答 5月13日
  • 创建了问题 5月7日

悬赏问题

  • ¥200 内网渗透测试 横向渗透 Windows漏洞 Windows权限维持
  • ¥15 数据结构图的相关代码实现
  • ¥20 求友友们解惑,感激不尽
  • ¥15 python中aiohttp.client_exceptions.ContentTypeError
  • ¥30 DeepLung肺结节检测生成最大froc值对应的epoch报错
  • ¥15 信号发生器如何将频率调大,步尽值改成10
  • ¥15 keil 5 编程智能家具,风扇台灯开关,人体感应等
  • ¥100 找一名渗透方面的专家
  • ¥20 使用Matlab APP设计一个插补小程序
  • ¥15 evo评估时曲线出现问题