使用 FormMaking 为表单添加事件处理

背景描述

 

表单在日常使用中，面对很多特殊的业务场景，需要为表单中某些控件单独设置一些事件来做自定义操作。为此，我们为 FormMaking表单设计器 添加了新的功能，可以快速的对表单中的元素绑定各种事件，使得表单能够有更好的扩展性。

 

查看 官方文档，可以了解到新版本添加了获取表单项组件的方法 getComponent，接下来我们用简单的例子来说明下如何为表单动态添加事件。

 

表单输入框加入点击事件

 

我们在表单开发的时候，常会有这样一种需求，就是点击文本框后会弹出一个模态框进行一些操作后将结果返回到文本框中；这里就需要给文本框添加点击事件来处理后面的操作。

 

下面我们实现一个简单的例子，点击文本框后，弹出提示框，点击确定后为文本框赋值。

 

1. 在设计器中添加一个文本框并修改字段标识为 name。

1. 点击生成代码，复制到我们的代码编辑器中并绑定点击事件。

<template>
  <div>
    <fm-generate-form 
      :data="jsonData" 
      :remote="remoteFuncs" 
      :value="editData" 
      :remote-option="dynamicData"
      ref="generateForm"
    >
    </fm-generate-form>
    <el-button type="primary" @click="handleSubmit">Submit</el-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      jsonData: {"list":[{"type":"input","icon":"icon-input","options":{"width":"100%","defaultValue":"","required":false,"requiredMessage":"","dataType":"","dataTypeCheck":false,"dataTypeMessage":"","pattern":"","patternCheck":false,"patternMessage":"","placeholder":"","customClass":"","disabled":false,"labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"showPassword":false,"remoteFunc":"func_1608119316839","remoteOption":"option_1608119316839"},"name":"单行文本","key":"1608119316839","model":"name","rules":[]}],"config":{"labelWidth":100,"labelPosition":"right","size":"small","customClass":"","ui":"element","layout":"horizontal","labelCol":3,"width":"100%","hideLabel":false,"hideErrorMessage":false}},
      editData: {},
      remoteFuncs: {
        
      },
      dynamicData: {
        
      }
    }
  },
  mounted () {
    this.$refs.generateForm.getComponent('fm-name').$el.onclick = () => {
      this.$alert('您点击了我', '提示').then(() => {
        this.$refs.generateForm.setData({
          name: '123'
        })
      })
    }
  },
  methods: {
    handleSubmit () {
      this.$refs.generateForm.getData().then(data => {
        // Data verification succeeded
        alert(JSON.stringify(data))
      }).catch(e => {
        // Data verification failed
      })
    }
  }
}
</script>

在表单渲染完成 mounted 方法中，为表单绑定事件，getComponent('fm-name') 方法可以找到表单设计器中为每个表单项绑定的字段标识的组件，以 fm-字段标识 的形式，返回值为 VueComponent 对象，我们可以通过其 $el 获取到原生DOM，就可以为其绑定原生的事件。

 

效果如下：

 

表单快速定位到输入框

 

有时候我们需要打开表单的时候，默认光标就在输入框中，这个时候我们也可以通过 getComponent 方法找到组件并且调用 focus 方法来实现。

 

同样是使用上面设计的表单，来看下代码：

this.$refs.generateForm.getComponent('fm-name').focus()