## 应用场景
我们在使用Word、Excel时,当修改了内容之后在标题栏会显示`脏标记`,从而可以明确的告知用户内容有变动。此外,如果在没有保存的情况下关闭窗口,系统会弹出提示框,让用户选择是否放弃修改
那么,在Web系统中,我们是否也可以支持这种`脏标记`机制呢?
答案是肯定的,CabloyJS就提供了这种`脏标记`机制,而且CabloyJS内置的所有可以编辑的页面都支持了这种效果
## 效果演示
![pagedirty-zhcn](https://portal.cabloy.com/api/a/file/file/download/49ef58bcaf8148f2b0ef9cc723a9e063.gif)
## 如何使用
下面以模块`test-party`为例,演示如何向编辑页面添加`脏标记`机制。演示代码都在下面的文件中:
`src/suite-vendor/test-party/modules/test-party/front/src/kitchen-sink/pages/markdownEditor.vue`
### 1. 引入脏标记组件
``` javascript
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显示脏标记
``` javascript
...
```
* 行16:获取国际化处理后的标题
* 行17:调用`page_getDirtyTitle`方法向`title`动态添加脏标记
* 行3:动态绑定`page_title`
### 3. 修改脏标记
``` javascript
export default {
...
methods: {
async onPerformSave() {
if (!this.$refs.editor) return;
await this.$refs.editor.checkContent();
this.$view.toast.show({ text: this.$text('Saved') });
this.page_setDirty(false);
},
onInput(data) {
if (this.content === data) return;
this.content = data;
this.page_setDirty(true);
},
},
};
```
* 行13:当用户输入内容时,调用`page_setDirty`方法将脏标记置为`true`
* 行8:当保存内容时,调用`page_setDirty`方法将脏标记置为`false`
## 组件ebPageDirty的方法
| 名称 | 说明 |
|----|----|
| page\_getDirtyTitle | 向Title动态添加脏标记 |
| page\_setDirty | 修改脏标记 |
## **相关链接**
* 官网:
* GitHub: