应用场景

我们在使用Word、Excel时,当修改了内容之后在标题栏会显示脏标记,从而可以明确的告知用户内容有变动。此外,如果在没有保存的情况下关闭窗口,系统会弹出提示框,让用户选择是否放弃修改

那么,在Web系统中,我们是否也可以支持这种脏标记机制呢?

答案是肯定的,CabloyJS就提供了这种脏标记机制,而且CabloyJS内置的所有可以编辑的页面都支持了这种效果

效果演示

pagedirty-zhcn

如何使用

下面以模块test-party为例,演示如何向编辑页面添加脏标记机制。演示代码都在下面的文件中:

src/suite-vendor/test-party/modules/test-party/front/src/kitchen-sink/pages/markdownEditor.vue

1. 引入脏标记组件

  1. 1import Vue from 'vue';
  2. 2const ebPageDirty = Vue.prototype.$meta.module.get('a-components').options.mixins.ebPageDirty;
  3. 3export default {
  4. 4 mixins: [ebPageDirty],
  5. 5 ...
  6. 6}

ebPageDirty是由模块a-components提供的组件,放入当前页面组件的mixins

2. Title显示脏标记

  1. 1<template>
  2. 2 <eb-page>
  3. 3 <eb-navbar :title="page_title" eb-back-link="Back">
  4. 4 ...
  5. 5 </eb-navbar>
  6. 6 </eb-page>
  7. 7</template>
  8. 8<script>
  9. 9import Vue from 'vue';
  10. 10const ebPageDirty = Vue.prototype.$meta.module.get('a-components').options.mixins.ebPageDirty;
  11. 11export default {
  12. 12 mixins: [ebPageDirty],
  13. 13 ...
  14. 14 computed: {
  15. 15 page_title() {
  16. 16 const title = this.$text('Markdown Editor');
  17. 17 return this.page_getDirtyTitle(title);
  18. 18 },
  19. 19 },
  20. 20};
  21. 21</script>
  • 行16:获取国际化处理后的标题

  • 行17:调用page_getDirtyTitle方法向title动态添加脏标记

  • 行3:动态绑定page_title

3. 修改脏标记

  1. 1export default {
  2. 2 ...
  3. 3 methods: {
  4. 4 async onPerformSave() {
  5. 5 if (!this.$refs.editor) return;
  6. 6 await this.$refs.editor.checkContent();
  7. 7 this.$view.toast.show({ text: this.$text('Saved') });
  8. 8 this.page_setDirty(false);
  9. 9 },
  10. 10 onInput(data) {
  11. 11 if (this.content === data) return;
  12. 12 this.content = data;
  13. 13 this.page_setDirty(true);
  14. 14 },
  15. 15 },
  16. 16};
  • 行13:当用户输入内容时,调用page_setDirty方法将脏标记置为true

  • 行8:当保存内容时,调用page_setDirty方法将脏标记置为false

组件ebPageDirty的方法

名称 说明
page_getDirtyTitle 向Title动态添加脏标记
page_setDirty 修改脏标记