在封装或使用el-dialog的时候无法获取到 $refs的坑

经常使用 vue 的对element-ui都不陌生，他的el-dialog弹框组件为了性能的提升，第一次打开之前是不会渲染body内容的，这样子将会导致一个问题，我们无法获取到 dom

解决方法

方法一

因为源码是通过rendered​参数来控制渲染的,所以我们只要让rendered参数在未打开时就值为true,虽然rendered是内部参数，不暴露api，但是我们可以通过弹框实例直接修改他

mounted(){
	this.$refs.
}

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

方法二

利用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参数开控制弹框是否需要预渲染了

方法三

获取更新的dom 等有DOM的时候在进行操作
使用 this.$nextTick

方法四