开发网站和app,广州网站设计专注乐云seo,wordpress增加自适应功能,怎么看一家网站是谁做的#x1f9e1;#x1f9e1;需求#x1f9e1;#x1f9e1;
未点击查看答案按钮时#xff0c;步骤3面板未展示内容#xff08;v-if控制#xff09;
点击查看答案按钮后#xff0c;通过graphviz绘制并展示状态转换图#xff0c;渲染在步骤2中#xff0c;同时步骤3的v-…需求
未点击查看答案按钮时步骤3面板未展示内容v-if控制
点击查看答案按钮后通过graphviz绘制并展示状态转换图渲染在步骤2中同时步骤3的v-if变为true渲染出内容并且也渲染展示这张图
遇到的问题
渲染重复性前端通过vue-graphviz库 使用svg渲染 后端传来的dot_str从而绘制出这张svg状态转换图问题出现在项目中需要展示两个同样svg由于它们的id相同根据共享原则导致只渲染了一个渲染时机涉及v-if、transition、添加dom节点的操作时机不对导致步骤3的svg图渲染不出来
解决思路
对于渲染重复性问题利用cloneNode函数复制一个新的svg从而添加dom节点 const svg viz.renderSVGElement(draw_dot[NFA][0])const svgClone svg.cloneNode(true)NFAs.value[0].appendChild(svg)NFAs.value[1].appendChild(svgClone)对于渲染时机掌握vue3 transition文档中描述的enter钩子应当确保v-if渲染后的dom生成后再调用渲染函数添加svg dom之后再开始进行transiton过渡
const handleStep3_TransEnter (el:Element, done:()void) {// console.log(NFAs.value)// console.log(step333333333333333333)if(!step3_open.value) return done()// console.log(222)// 此时元素已插入 DOMnextTick().then(() {// console.log(NFAs.value)// 确保 ref 已收集if (NFAs.value.length 2) {instance().then(viz {const svg viz.renderSVGElement(draw_dot[NFA][0])const svgClone svg.cloneNode(true)NFAs.value[0].appendChild(svg)NFAs.value[1].appendChild(svgClone)draw_dot[NFA][1] true})}})
}
