小说网站建设多少钱,大连手机自适应网站制作公司,天津重型网站建设推荐,纹理网站推荐1
使用 v-if 指令时#xff0c;元素的插入和移除是动态的#xff0c;当元素被移除时#xff0c;与元素相关的对象和事件处理程序也会被销毁#xff0c;包括 ACE 编辑器对象。因此#xff0c;当再次插入元素时#xff0c;相关的对象和事件处理程序需要重新初始化。
使用 …1
使用 v-if 指令时元素的插入和移除是动态的当元素被移除时与元素相关的对象和事件处理程序也会被销毁包括 ACE 编辑器对象。因此当再次插入元素时相关的对象和事件处理程序需要重新初始化。
使用 v-show 可以在编辑器对象被创建后一直保持元素的显示状态不会出现对象和事件处理程序被销毁的情况因此可以正常工作。
2 v-if 导致错误 浏览器终端提醒没有dom 元素 -- 下面代码用v-show 可以 div classeditor-wrapper v-ifeditorVisiblediv ideditor
methods: {showEditor() {if (this.editorVisible) {// 如果编辑器已经打开则关闭编辑器this.editorVisible false;this.editor.destroy();this.editor null;} else {// 如果编辑器未打开则打开编辑器if (this.editor) {// 如果编辑器已经存在则直接显示编辑器this.editorVisible true;this.editor.focus();} else {// 如果编辑器不存在则创建编辑器并显示const editor ace.edit(editor);editor.setOptions({fontSize: 8pt,});editor.getSession().setMode(ace/mode/javascript);editor.setTheme(ace/theme/twilight);editor.setValue(this.code);editor.clearSelection();editor.focus();editor.$blockScrolling Infinity; // 添加这句代码this.editor editor;this.editorVisible true;}}},
3 解决上面代码 使用v-if
Vue的v-if和v-show的区别是v-if是按需渲染组件并且在切换时销毁和重新创建组件实例而v-show是根据条件控制元素的显示和隐藏的。因此在使用v-if时如果元素在初始渲染时没有被渲染那么在接下来的操作中就可能会出现找不到元素的情况。在你的代码中当使用v-show时元素会在初始渲染时就被渲染出来因此ace.edit可以找到div #editor节点。但是当你使用v-if时div #editor元素在初始渲染时并没有被渲染出来而是在showEditor方法中根据编辑器是否存在来创建或销毁元素。这个时候如果你在创建编辑器之前就调用了ace.edit方法就会报错找不到div #editor元素。解决方法有两种使用v-show而不是v-if因为v-show会在初始渲染时就将元素渲染出来。
将ace.edit方法的调用放在div #editor元素被创建后执行可以在mounted钩子函数中添加一个this.$nextTick()方法来确保元素已经被渲染出来
data() {return {editorVisible: false,chart: null,editor: null,code: function funcSelfIndex() {\n // 在这里输入自定义函数的代码\n\n\n\n\n\n\n\n\n},};
},
mounted() {this.showEditor();
},
methods: {showEditor() {if (this.editorVisible) {this.editorVisible false;if (this.editor) {this.editor.destroy();this.editor null;}} else {this.editorVisible true;if (!this.editor) {this.$nextTick(() {const editor ace.edit(editor);editor.setOptions({ fontSize: 8pt });editor.getSession().setMode(ace/mode/javascript);editor.setTheme(ace/theme/twilight);editor.setValue(this.code);editor.clearSelection();editor.focus();editor.$blockScrolling Infinity;this.editor editor;});} else {this.editor.focus();}}},
}
4 总结
dom元素重新创建渲染,这个过程需要时间.导致代码执行时,
没有等待dom元素重新创建好就执行之后的代码
所以 v-if 重新创建dom元素,需要时间,并且代码执行时不等待dom元素是否创建成功
就执行之后的代码;导致可能找不到dom元素
