高级操作手册 # 表单设计器进阶 本进阶文档适用于有前端编程经验的人 ## 一、全局CSS增强 可以在**表单属性**里最下方找到**CSS增强**的输入框，在这里可以写css样式，在预览的时候会自动应用你写的样式。 配合几乎每个组件都有**CSS类名**属性，就能做到单独对某一个或某些组件写样式修改了。 ### CSS增强例子 例如我向页面中拖入了一个**单行文本**组件，并且想要把这个输入框的文字颜色改为**红色**，需要有以下步骤： 1. 修改组件的CSS类名属性，增加一个类名，例如叫`input-red`  2. 在表单属性里的CSS增强中修改样式，如下所示：  3. 接着点预览查看效果  **我们可以发现输入框的颜色并没有变成红色**，这是因为element-ui将真正的input组件放到了更深层的dom里，我们可以用chrome的devTools工具查看一下 4. 找到真实的input类名，我们可以发现真实的input类名叫做`el-input__inner`  5. 再次修改CSS增强代码，如下图所示  6. 再点击预览查看一下效果，发现输入框的颜色已经变成红色了，并且还不会影响到其他组件。  ## 二、全局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 值的变化 - 示例： ```js // 与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增强完全一致。 ### 示例：点击按钮获取输入框的值 如果想做到点击按钮的时候获取输入框的值，我们需要下面这几步： 1. 在页面中拖入一个输入框，并且将它的数据绑定Key改为`name`  2. 在页面中拖入一个按钮，并且将它的点击事件改为下面这样：  ```js // 可以用 api 里的 getFormData 方法获取 var name = api.getFormData("name"); alert("你填写的姓名是：" + name); ``` 3. 点击预览，查看效果  ## 三、自定义接收URL 目的是为了让用户自定义接收数据的后台接口地址，你可以在你自己定义的接口里做数据处理，并保存到数据库、 配置方式： 在“表单属性”最下方有一个“自定义接收URL”输入框，你可以输入你的后台API地址