温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

element-plus dialog v-loading不生效问题如何解决

发布时间:2023-03-30 15:25:02 来源:亿速云 阅读:931 作者:iii 栏目:开发技术

这篇文章主要介绍“element-plus dialog v-loading不生效问题如何解决”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“element-plus dialog v-loading不生效问题如何解决”文章能帮助大家解决问题。

    element-plus dialog v-loading不生效

    使用版本

    “element-plus”: “1.3.0-beta.4”

    问题

    el-dialog的v-loading 这样使用没反应。

    element-plus dialog v-loading不生效问题如何解决

    解决

    定义ref 并使用 ElLoading.service

    element-plus dialog v-loading不生效问题如何解决

    setup定义

    const me = ref(null)
    ElLoading.service({ target: me.value.dialogRef })

    补充

    今天我试了下最新版本 “element-plus”: “^2.1.6”, 然后 me.value.dialogRef 获取不到了。。。

    element-plus el-dialog使用v-loading指令失效

    目前解决方法是使用实例,效果是整个dialog模块存在loading,包括header,footer,内容和右上关闭按钮

    // html
    <el-dialog v-model="dialogVisible" custom-class="demo" @opened="initDialog">1111</el-dialog>
     
    // ts
    const initDialog = () => {
      // 用服务生成一个el-loading实例,包括了自定义svg的指令如何在服务中使用
      let demo = ElLoading.service({ target: '.demo', text: '加载中...', background: 'rgba(122, 122, 122, 0.1)', svg: svg, 'svgViewBox': '-10, -10, 50, 50' })
      setTimeout(() => {
        // 延时执行关闭,对应dom清除,如要再使用loading,需重新生成新实例
        demo.close()
      }, 5000)
    }

    关于“element-plus dialog v-loading不生效问题如何解决”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。

    向AI问一下细节

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    AI