(1) 添加布局和元素如下图：

绿色的是一个层，层中加入的是“同步数据”元素。

图中的“选择文件”是在单行文本的基础上修改而成的。插入一个单行文本，切换到源码，将源码修改为下图：

”选择文件“下面添加的是从左侧”静态元素“中拖来的进度条。

(2) “同步数据”元素的设置

在元素上右键选择“获取数据元素设置”，弹出对话框，设置如下图：

在元素上右键选择“逻辑”→数据绑定→绑定模式：属性绑定→绑定参数：{"data--sync":update,"data-x-pg":pg}。

(3) 进度条的设置

找到进度条的内侧 div(进度条有两层div)，在内侧div上设置数据绑定，如下图：

绑定参数：{"width":(pg() * 100).toFixed(2) +"%"}，绑定变量初始化：{"pg":0}。toFixed(n)表示保留n位小数。

在样式类文件中添加如下样式类

.progress-bar {
  -webkit-transition: width 0s ;
    -o-transition: width 0s;
    transition: width 0s;
}

(4) 设置进度值

在上传进度的数值上加上span标签，如下

<h3>上传进度<span">0</span>%</h3>

在span标签上设置数据绑定，如下：

绑定参数：(pg() * 100).toFixed(2)。

(5) 按钮设置

同步按钮的逻辑设置如下：

高级编辑填入的代码为：_vm.update("true")。

取消按钮的设置与同步按钮的设置大致相同，不同的是高级编辑填入的代码为：_vm.update("")。