使用form-create监听组件的事件

FormCreate 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。支持5个UI框架，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定

FormCreate官网：https://www.form-create.com

帮助文档：https://form-create.com/v3/

通过配置项`on`,`emit`可以监听组件内抛出的事件

1. 通过配置项`on`监听事件

<template>
  <div>
    {{ text }}
    <form-create :rule="rule" v-model:api="fApi" :option="options"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fApi: {},
      text: '没有变化',
      options: {
        onSubmit: (formData) => {
          alert(JSON.stringify(formData))
        }
      },
      rule: [
        {
          type: 'input',
          field: 'event',
          title: 'change 事件',
          on: {
            change: (val) => {
              this.text = '变化了:"' + val.target.value + '"';
            }
          }
        }
      ]
    }

  }
}
</script>

2. 通过配置项`emit`监听事件
通过`emit`方式监听事件时,事件名称中的大写会自动转换成`-`+小写
例如`inputField`组件的 `change`事件,事件名称为`input-field-change`

<template>
  <form-create v-model:api="fApi" :rule="rule" :option="options" @input-field-change="change"
               @input-field2-blur="blur"/>
</template>

<script>
export default {
  data() {
    return {
      fApi: {},
      options: {
        onSubmit: (formData) => {
          alert(JSON.stringify(formData))
        }
      },
      rule: [
        {
          type: 'input',
          field: 'inputField',
          title: 'change 事件',
          emit: ['change']
        },
        {
          type: 'input',
          field: 'inputField2',
          title: 'blur 事件',
          emit: ['blur']
        }
      ]
    }

  },
  methods: {
    change() {
      alert(`change: "${this.fApi.getValue('inputField')}"`)
    },
    blur() {
      alert('blur!')
    }
  }
}
</script>

3. 通过配置项`emitPrefix`自定义事件前缀

事件名称为`${emitPrefix}-${eventName}`

<template>
  <form-create :rule="rule" v-model:api="fApi" :option="options" @prefix1-change="change" @prefix2-blur="blur"/>
</template>

<script>
export default {
  data() {
    return {
      fApi: {},
      options: {
        onSubmit: (formData) => {
          alert(JSON.stringify(formData))
        }
      },
      rule: [
        {
          type: 'input',
          field: 'inputField',
          title: 'change 事件',
          emit: ['change', 'blur'],
          emitPrefix: 'prefix1'
        },
        {
          type: 'input',
          field: 'inputField2',
          title: 'blur 事件',
          emit: ['blur'],
          emitPrefix: 'prefix2'
        }
      ]
    }

  },
  methods: {
    change() {
      alert(`change: "${this.fApi.getValue('inputField')}"`)
    },
    blur() {
      alert('blur!')
    }
  }
}
</script>

 

4. 通过`Api.on`方法监听事件

<template>
  <form-create :rule="rule" v-model:api="fApi" :option="options"/>
</template>

<script>
export default {
  data() {
    return {
      fApi: {},
      options: {
        onSubmit: (formData) => {
          alert(JSON.stringify(formData))
        }
      },
      rule: [
        {
          type: 'input',
          field: 'inputField',
          title: 'change 事件',
          emit: ['change', 'blur'],
          emitPrefix: 'prefix1'
        },
        {
          type: 'input',
          field: 'inputField2',
          title: 'blur 事件',
          emit: ['blur'],
        }
      ]
    }

  },
  methods: {
    change() {
      alert(`change: "${this.fApi.getValue('inputField')}"`)
    },
    blur() {
      alert('blur!')
    }
  },
  mounted() {
    this.fApi.on('prefix1-change', this.change)
    this.fApi.on('input-field2-blur', this.blur)
  }
}
</script>