利用场景
咱们在应用 Word、Excel 时,当批改了内容之后在标题栏会显示 脏标记
,从而能够明确的告知用户内容有变动。此外,如果在没有保留的状况下敞开窗口,零碎会弹出提示框,让用户抉择是否放弃批改
那么,在 Web 零碎中,咱们是否也能够反对这种 脏标记
机制呢?
答案是必定的,CabloyJS 就提供了这种 脏标记
机制,而且 CabloyJS 内置的所有能够编辑的页面都反对了这种成果
成果演示
如何应用
上面以模块 test-party
为例,演示如何向编辑页面增加 脏标记
机制。演示代码都在上面的文件中:
src/module-vendor/test-party/front/src/kitchen-sink/pages/markdownEditor.vue
1. 引入脏标记组件
import Vue from 'vue';
const ebPageDirty = Vue.prototype.$meta.module.get('a-components').options.mixins.ebPageDirty;
export default {mixins: [ebPageDirty],
...
}
ebPageDirty
是由模块 a-components
提供的组件,放入以后页面组件的 mixins
中
2. Title 显示脏标记
<template>
<eb-page>
3. <eb-navbar :title="page_title" eb-back-link="Back">
...
</eb-navbar>
</eb-page>
</template>
<script>
import Vue from 'vue';
const ebPageDirty = Vue.prototype.$meta.module.get('a-components').options.mixins.ebPageDirty;
export default {mixins: [ebPageDirty],
...
computed: {page_title() {16. const title = this.$text('Markdown Editor');
17. return this.page_getDirtyTitle(title);
},
},
};
</script>
- 行 16:获取国际化解决后的题目
- 行 17:调用
page_getDirtyTitle
办法向title
动静增加脏标记 - 行 3:动静绑定
page_title
3. 批改脏标记
export default {
...
methods: {async onPerformSave() {if (!this.$refs.editor) return;
await this.$refs.editor.checkContent();
this.$view.toast.show({text: this.$text('Saved') });
8. this.page_setDirty(false);
},
onInput(data) {if (this.content === data) return;
this.content = data;
13. this.page_setDirty(true);
},
},
};
- 行 13:当用户输出内容时,调用
page_setDirty
办法将脏标记置为true
- 行 8:当保留内容时,调用
page_setDirty
办法将脏标记置为false
组件 ebPageDirty 的办法
名称 | 阐明 | |
---|---|---|
page_getDirtyTitle | 向 Title 动静增加脏标记 | |
page_setDirty | 批改脏标记 |
相干链接
- 文档: https://cabloy.com/
- GitHub: https://github.com/zhennann/c…