高级操作手册

表单设计器进阶

本进阶文档适用于有前端编程经验的人

一、全局CSS增强

可以在表单属性里最下方找到CSS增强的输入框，在这里可以写css样式，在预览的时候会自动应用你写的样式。配合几乎每个组件都有CSS类名属性，就能做到单独对某一个或某些组件写样式修改了。

CSS增强例子

例如我向页面中拖入了一个单行文本组件，并且想要把这个输入框的文字颜色改为红色，需要有以下步骤：

修改组件的CSS类名属性，增加一个类名，例如叫input-red

在表单属性里的CSS增强中修改样式，如下所示：

接着点预览查看效果

我们可以发现输入框的颜色并没有变成红色，这是因为element-ui将真正的input组件放到了更深层的dom里，我们可以用chrome的devTools工具查看一下

找到真实的input类名，我们可以发现真实的input类名叫做el-input__inner

再次修改CSS增强代码，如下图所示

再点击预览查看一下效果，发现输入框的颜色已经变成红色了，并且还不会影响到其他组件。

二、全局JS增强

可以在表单属性里最下方找到JS增强的输入框，在这里可以写js代码，在预览的时候会自动执行你写的JS代码。

在JS增强输入框里除了可以用挂载到window中的全局变量之外，还可以用我们给你封装好的几个变量以及方法，他们分别是：

vm Vue实例，可以调用Vue的一系列的方法，例如 vm.$nextTick();
event Event对象，可以调用 event.type 来判断当前是什么增强类型（全局还是按钮）
api 封装了一下api，具体如下
- getFormData(key) 获取form表单的值
- setFormData(key, value) 设置form表单的值
- setFormOptions(key, optionsKey, optionsValue) 设置组件的options
- watch(watchItems) 设置监听 models 值的变化
  - 示例：

  // 与vue的watch用法相同，可参见vue的官方文档
  api.watch([
      name(val, oldVal){
          // name 发生了变化
      },
      info: { 
          deep: true,
          handler(val, oldVal){
              // info 发生了变化
          }
      }
  ]);

get(url, parameter) 发送Get请求
post(url, parameter) 发送Post请求
put(url, parameter) 发送Put请求
request(url, parameter, method) 发送请求

三、按钮点击事件JS增强

除了全局JS增强，还支持按钮的JS增强，就是会在点击按钮的时候执行的JS代码

上图中，红框里的代码是按钮的默认点击事件，可以在预览界面点击界面看到输出。与全局JS增强一样，按钮JS增强也封装好了几个变量以及方法，并且与全局JS增强完全一致。

示例：点击按钮获取输入框的值

如果想做到点击按钮的时候获取输入框的值，我们需要下面这几步：

在页面中拖入一个输入框，并且将它的数据绑定Key改为name

在页面中拖入一个按钮，并且将它的点击事件改为下面这样：

 // 可以用 api 里的 getFormData 方法获取
 var name = api.getFormData("name");
 alert("你填写的姓名是：" + name);

点击预览，查看效果

三、自定义接收URL

目的是为了让用户自定义接收数据的后台接口地址，你可以在你自己定义的接口里做数据处理，并保存到数据库、

配置方式：

在“表单属性”最下方有一个“自定义接收URL”输入框，你可以输入你的后台API地址