10大免费软件下载网站,工厂生产管理系统,腾讯企点聊天记录迁移,做网站需要学啥问题描述#xff1a;
我的子页面打印的时候通过isPdf来隐藏“选择参加人员”按钮。 我子页面有个el-dialog#xff0c;el-dialog里面有个大的div它的id为app-pre-meet-add#xff0c;在子页面我通过isPdf来显示我想要的内容。现在我在父页面先通过this.$refs.child.control…问题描述
我的子页面打印的时候通过isPdf来隐藏“选择参加人员”按钮。 我子页面有个el-dialogel-dialog里面有个大的div它的id为app-pre-meet-add在子页面我通过isPdf来显示我想要的内容。现在我在父页面先通过this.$refs.child.controlPdf(true)来调用子页面的controlPdf方法使得子页面的isPdf变成true然后通过下面的代码来克隆子页面的id为app-pre-meet-add的div this.$refs.child.controlPdf(true);const container document.getElementById(app-pre-meet-add);// 克隆父元素深刻隆const clonedParent container.cloneNode(true);clonedParent.setAttribute(class, cloned-app-pre-meet-add-class);container.parentNode.insertBefore(clonedParent, container.nextSibling);// 查找所有带有 hidden 类的子元素 form并在克隆的元素中移除 hidden 类const clonedHiddenForms clonedParent.querySelectorAll(.hidden);clonedHiddenForms.forEach((form) {form.classList.remove(hidden);});
理论上这个新克隆的div应该是有子页面div在isPdf为true情况下的状态但是为什么isPdf没有用
原因
这个问题的根源在于cloneNode方法的行为。当你克隆一个DOM元素时你得到的是该元素在那一刻的快照包括它的所有子元素和属性。但是这个方法不会克隆与该元素相关联的JavaScript状态或事件监听器。在你的情况下isPdf可能是一个响应式数据属性或者计算属性它控制着el-dialog中某些元素的显示或隐藏。当你克隆div时你只是复制了它的静态结构而没有复制Vue实例中的响应式状态。 解决方法
使用Vue的ref和$nextTick 你可以在子组件的div上使用ref并在父组件中通过$refs访问它。然后你可以在父组件中调用一个方法来改变isPdf的状态并使用$nextTick来确保DOM已经被更新。在$nextTick的回调函数中你可以克隆div。
就是使用nextTick
appPreAdd(formText, vdata, flag, res) {this.$refs.child.controlPdf(true);this.$nextTick(async () {const container document.getElementById(app-pre-meet-add);// 克隆父元素深刻隆const clonedParent container.cloneNode(true);clonedParent.setAttribute(class, cloned-app-pre-meet-add-class);container.parentNode.insertBefore(clonedParent, container.nextSibling);// 查找所有带有 hidden 类的子元素 form并在克隆的元素中移除 hidden 类const clonedHiddenForms clonedParent.querySelectorAll(.hidden);clonedHiddenForms.forEach((form) {form.classList.remove(hidden);});await htmlToPdftoFile.getPdfFromHtml(.cloned-app-pre-meet-add-class,formText,add,res.data.data,new Date(vdata.createTime),this.checkFormTypeList[flag]);container.parentNode.removeChild(clonedParent);this.$refs.child.controlPdf(false);});},
最新问题
这个问题就是await后面要跟promise我没注意。
可以看到await修饰 this.appPreAdd方法
解决
appPreAdd(formText, vdata, flag, res) {return new Promise((resolve, reject) {this.$refs.child.controlPdf(true);this.$nextTick(async () {try {const container document.getElementById(app-pre-meet-add);const clonedParent container.cloneNode(true);clonedParent.setAttribute(class, cloned-app-pre-meet-add-class);container.parentNode.insertBefore(clonedParent,container.nextSibling);const clonedHiddenForms clonedParent.querySelectorAll(.hidden);clonedHiddenForms.forEach((form) {form.classList.remove(hidden);});// 等待 PDF 生成完成await htmlToPdftoFile.getPdfFromHtml(.cloned-app-pre-meet-add-class,formText,add,res.data.data,new Date(vdata.createTime),this.checkFormTypeList[flag]);container.parentNode.removeChild(clonedParent);this.$refs.child.controlPdf(false);// 成功完成解析 Promiseresolve();} catch (error) {// 发生错误拒绝 Promisereject(error);}});});},
