按钮组件

按钮组件经常被用于允许用户与系统进行交互,特别是用户希望触发事件时。

比如说,用户可以在输入框输入文字后,点击“搜索”按钮,来触发一次数据库搜索。或者,你可以添加一个“删除”按钮,允许用户删除他选中的一行表格中的数据。

按钮的使用非常简单,只要将按钮拖到界面中,配置点击行为即可

按钮文字

在编辑界面中点击按钮可以设置按钮文字,我们建议将按钮文字设置得足够清晰以便用户可以非常容易地理解可以进行的操作。

触发事件

按钮最主要的作用就是允许用户触发事件,比如说,你可以允许用户点击按钮时实现上传一个他选中的文件。

具体的事件触发详细文档请参考事件触发文档,这里我们用一个简单的例子来说明如何在按钮上设置触发事件。

假设你的用户是市场部的小杨,她需要在一个内容管理系统编辑好内容后,复制出来并邮件发送给同事。

那么我们可以

  1. 添加一个富文本编辑器,允许小杨进行文本编辑
  2. 添加一个按钮,当点击这个按钮时,我们复制富文本编辑器中的内容到剪贴板中,这样小杨可以直接粘贴就发送给同事

首先我们往编辑器中拖入一个按钮和一个富文本编辑器,将按钮文字改为 复制文本为 HTML

接下来,选中按钮,在设置栏中点“添加事件”

添加事件

最后,我们配置这个事件: 选择当用户点击按钮时,触发“复制到剪切板”事件,复制的内容为 {{richTextEditor1.value}} 也即用户在富文本编辑中输入的内容。这样,每当用户点击这个按钮时,就会将内容定制到她的剪贴板中。

内容被复制到了剪切板中

当然,你还可以设置其它事件,比如触发执行一个查询,查询中可以发送一封邮件、插入数据到数据库等等。