关于node.js:看看CabloyJS是如何实现编辑页面脏标记的

利用场景

咱们在应用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的办法

相干链接

• 文档: https://cabloy.com/
• GitHub: https://github.com/zhennann/c...