强制加载element-dialog

发表于:2022-05-04 12:45
技术,vue
热度:137
喜欢:0

强制加载element-dialog

背景

html 复制代码
<el-dialog>
  <MyComponent />
</el-dialog>

自己封装的组件 MyComponent ,放在了el-dialog里面,其中有一段created和mounted之后,定时执行的方法
但是后来怎么调试都无法加载,查阅源码后发现,el-dailog懒加载了
只会在第一次展示之后才会挂在弹窗内部的东西

html 复制代码
<div class="el-dialog__body" v-if="rendered"><slot></slot></div>
js 复制代码
//  element-ui/packages/dialog/src
export default {
  mounted() {
    if (this.visible) {
      this.rendered = true;
      this.open();
      if (this.appendToBody) {
        document.body.appendChild(this.$el);
      }
    }
  },
}

在侵入el-dialog组件的前提下,利用组件的hook事件,强制加载

html 复制代码
<el-dialog ref="dialog"  @hook:mounted="$refs.dialog.rendered = true">
  <MyComponent /> 
</el-dialog>