强制加载element-dialog

发表于:2022-05-04 12:45

技术,vue

热度:169

喜欢: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>