应用场景

我们在使用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 修改脏标记

相关链接

看看CabloyJS是如何实现编辑页面脏标记的的更多相关文章

  1. ‎Cocos2d-x 学习笔记(15.3) EventDispatcher DirtyFlag 脏标记

    1. 定义 用枚举定义脏标记的4种类型. enum class DirtyFlag { NONE = , FIXED_PRIORITY = << , SCENE_GRAPH_PRIORIT ...

  2. 玩家属性同步优化-脏数据标记(位运算、数组、stl之bitset)

    把大神的帖子中一部分摘抄出来,结合自己写的位运算代码和循环代码(数组遍历)进行性能测试分析并给出结果. 摘自: https://www.gameres.com/827195.html 本文适用于所有脏 ...

  3. CabloyJS 4.12震撼发布,及新版教程尝鲜

    引言 凡是可以用 JavaScript 来写的应用,最终都会用 JavaScript 来写 | Atwood 定律 目前市面上出现的大多数与 NodeJS 相关的框架,基本都将 NodeJS 定位在工 ...

  4. 在Unity中使用UGUI修改Mesh绘制几何图形

    在商店看到这样一个例子,表示很有兴趣,他们说是用UGUI做的.我想,像这种可以随便变形的图形,我第一个就想到了网格变形. 做法1: 细心的朋友应该会发现,每个UGUI可见元素,都有一个‘Canvas ...

  5. What every programmer should know about memory 笔记

    What every programmer should know about memory, Part 1(笔记) 每个程序员都应该了解的内存知识[第一部分] 2.商用硬件现状      现在硬件的 ...

  6. Cocos2d-X3.0 刨根问底(七)----- 事件机制Event源码分析

    这一章,我们来分析Cocos2d-x 事件机制相关的源码, 根据Cocos2d-x的工程目录,我们可以找到所有关于事件的源码都存在放在下图所示的目录中. 从这个event_dispatcher目录中的 ...

  7. Unity3D脚本中文系列教程(十七)

    http://dong2008hong.blog.163.com/blog/static/469688272014032332976/ ◆ Static function PrefixLabel(to ...

  8. linux内核--页高速缓存

    页高速缓存,可以理解为对磁盘中的文件内容进行缓存的一种缓存策略,当然它不仅仅用于磁盘文件. 当对同一磁盘数据反复访问时,缓存数据就是非常必须的了.这就是buffer和 cache这两个概念中的buff ...

  9. Apache HTTP Server mod_session_dbd模块mod_session_dbd.c 安全漏洞

    漏洞名称: Apache HTTP Server mod_session_dbd模块mod_session_dbd.c 安全漏洞 CNNVD编号: CNNVD-201307-488 发布时间: 201 ...

随机推荐

  1. vue—子组件修改父组件的值

    如何在子组件中修改父组件的值第一步:首先得保证父组件中有值吧这是userManage.vue 1 data(){ 2 return{ 3 dialogCreate:'false' 4 } 5 } 第二 ...

  2. Hyperledger Fabric的test-network启动过程Bash源码详解

    前言 在基于Debian搭建Hyperledger Fabric 2.4开发环境及运行简单案例中,我们已经完成了Fabric 2.4的环境搭建及fabric-samples/test-network官 ...

  3. os、sys、json、subprocess模块

    今日内容概要 1.os模块 2.sys模块 3.json模块 4.subprocess模块 今日内容详细 os模块 """该模块主要是跟操作系统打交道"&quo ...

  4. Typora+PicGO+Gitee实现图床功能

    Typora+PicGO+Gitee实现图床功能 版本 typora(0.9.86) PicGo(2.3.0) 主要参考链接 出现问题就先看看这个 问题一 打开PicGo后安装github插件会一直安 ...

  5. 深度学习教程 | Seq2Seq序列模型和注意力机制

    作者:韩信子@ShowMeAI 教程地址:http://www.showmeai.tech/tutorials/35 本文地址:http://www.showmeai.tech/article-det ...

  6. Java语言学习day17--7月23日

    1.面向对象思想2.类与对象的关系3.局部变量和成员变量的关系4.封装思想5.private,this关键字6.随机点名器 ###01面向对象和面向过程的思想 * A: 面向过程与面向对象都是我们编程 ...

  7. python基础练习题(题目 有序列表插入元素)

    day26 --------------------------------------------------------------- 实例039:有序列表插入元素 题目 有一个已经排好序的数组. ...

  8. i2c调试工具分享

    i2c-tools简介 在嵌入式开发仲,有时候需要确认硬件是否正常连接,设备是否正常工作,设备的地址是多少等等,这里我们就需要使用一个用于测试I2C总线的工具--i2c-tools. i2c-tool ...

  9. 雪花算法生成分布式ID

    分布式主键ID生成方案 分布式主键ID的生成方案有以下几种: 数据库自增主键 缺点: 导入旧数据时,可能会ID重复,导致导入失败 分布式架构,多个Mysql实例可能会导致ID重复 UUID 缺点: 占 ...

  10. python学习-Day7

    目录 作业讲解 数据类型内置方法2 字符串(str) 列表(list) 类型转换 内置方法 索引取值 切片操作 步长 统计列表中元素的个数 成员运算 (in和not in) 列表添加元素的方式* 删除 ...