当前位置:首页 » 《随便一记》 » 正文

elementUI中dialog踩坑(首次渲染问题)_smouns_的博客

4 人参与  2022年04月29日 12:57  分类 : 《随便一记》  评论

点击全文阅读


经常使用vue的同学对element-ui的弹框组件应该都不陌生,element为了优化性能,在弹框未首次打开之前,是会不渲染弹框body中的内容的,一般情况下这样的设定是没有问题的,弹框未打开时我们一般也是不需要对弹框内容做操作的,但是在一些特殊情况,可能就有问题了

弹框中使用其他组件,或者获取dom元素

让我们继续翻看el-dialog的源码:

 

 

可以看到body部分的渲染是通过​rendered​参数来控制的,

rendered是el-dialog中的内部参数,在首次打开之后,el-dialog将rendered置为true,之后body内容就开始渲染。

解决问题:

1.方式一

知道el-dialog的代码实现之后,我们想解决这个问题就非常简单了,只要让rendered参数在未打开时就值为true,虽然rendered是内部参数,不暴露api,但是我们可以通过弹框实例直接修改他

 直接在我们的mounted事件中调用dialog实例,将rendered置为true,此时body内容就可以开始渲染了

2.方式二

通过以上的处理,基本满足我们的需求了,但是可不可以更进一步呢,比如有多处需要类似需求,那我们需要在业务逻辑中每次都写一个处理,非常不方便,同时处理需要在mounted事件中,否则拿不到弹框实例,而弹框实例挂载也是需要时间的(尽管时间非常快),所以我们最好可以封装一个直接做一个独立的组件使用。

正好vue就提供了这样的api,让我们可以非常方便的扩展组件。

 利用extends我们可以保留组件来源的全部功能,只需加上我们需要的逻辑就行了

<script>
import { Dialog } from "element-ui";
export default {
  extends: Dialog,
  props: {
    preload: {
      type: Boolean,
      default: false,
    },
  },
  created() {
    this.preload && (this.rendered = true);
  },
};
</script>

通过简单的扩展,我们就可以直接使用preload参数开控制弹框是否需要预渲染了

3.方式三

获取更新的dom,进行dom的相关操作

利用this.$nextTick(()=>{}) 等更新完成后,在操作 

 


点击全文阅读


本文链接:http://zhangshiyu.com/post/39138.html

渲染  组件  参数  
<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 我本忠臣,你们却让我谋反当王?常读_赵羽后续加长_小说后续在线阅读_无删减免费完结_
  • 荒年求生!我农场无限升级,皇帝都跪了小说(鱼宸汐)小说***下载_章节前文+后续(荒年求生!我农场无限升级,皇帝都跪了)
  • 靳砚修沈瓷后续(等不到白发苍苍)(靳砚修沈瓷)整本畅享在线+无广告结局
  • 热更章节_笔趣阁(白月光哪有联姻老婆香)霍彻孟时初白月光哪有联姻老婆香后续全本浏览阅读
  • 老公为哄情人开心,把女儿吊威亚上高温(沈思瑜,都说,许南枝)全书免费_(沈思瑜,都说,许南枝)老公为哄情人开心,把女儿吊威亚上高温后续(沈思瑜,都说,许南枝)
  • 要不见,便不会念凤九歌无和后续(凤九歌无和)全篇在线阅读前传
  • 等不到白发苍苍小说完本章节前文+全篇阅读(靳砚修沈瓷)连载中
  • 顾青柠陆景煜电子书+番外篇章+(宁嫁牌位不当妾,国公府我说了算)免费版在线阅读
  • 嫂子开门,我是我哥(江晚棠段成轩)全书浏览_嫂子开门,我是我哥全书浏览
  • 全文重生后为二皇子解神罚,太子殿下追悔莫及(裴光潜苏念柔裴砚书)列表_全文重生后为二皇子解神罚,太子殿下追悔莫及
  • 完结文等夏归列表_完结文等夏归(沈时安云意)
  • 诱娶小可怜,京圈太子跪地吻孕肚!每日分享_姚水儿傅宴亭快手热门_小说后续在线阅读_无删减免费完结_

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1