经常使用 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
方法四