看看CabloyJS是如何在编辑页面实现脏标记的

应用场景我们在使用Word和Excel时，当内容被修改时，标题栏会显示脏标记，这样可以清楚的告知用户内容已经改变。另外，如果没有保存就关闭了窗口，系统会弹出一个提示框，让用户选择是否放弃修改。那么，在web系统中，是否也可以支持这种脏标记机制呢？答案是肯定的，CabloyJS提供了这种脏标记机制，CabloyJS内置的所有可编辑页面都支持这种效果。标记机制。演示代码在以下文件中：src/module-vendor/test-party/front/src/kitchen-sink/pages/markdownEditor.vue1。引入脏标记组件importVuefrom'vue'；constebPageDirty=Vue.prototype.$meta.module.get('a-components').options.mixins.ebPageDirty;exportdefault{mixins:[ebPageDirty],...}ebPageDirty是模块a-提供的组件components，放到当前页面的component中mixins2.Title显示dirtymarkup第16行：获取国际化标题第17行：调用p??age_getDirtyTitle方法为标题动态添加脏标签第3行：动态绑定page_title3.修改脏标签exportdefault{...方法:{异步onPerformSave(){如果(!this.$refs.editor)返回；等待this.$refs.editor.checkContent();this.$view.toast.show({text:this.$text('Saved')});8.this.page_setDirty(false);},onInput(data){if(this.content===data)返回;this.content=数据；13.这个.page_setDirty(真);},},};第13行：当用户输入内容时，调用page_setDirty方法将脏标记设置为true第8行：保存内容时，调用page_setDirty方法将脏标记设置为false组件的方法名ebPageDirty描述page_getDirtyTitle动态将脏标记添加到标题页_setDirty修改脏标记相关文档链接：https://cabloy.com/GitHub：https://github.com/zhennann/c...