使用form-create監(jiān)聽組件的事件

FormCreate 是一個可以通過 JSON 生成具有動態(tài)渲染、數(shù)據(jù)收集、驗證和提交功能的表單生成組件。支持5個UI框架，并且支持生成任何 Vue 組件。內置20種常用表單組件和自定義組件，再復雜的表單都可以輕松搞定

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


通過配置項`on`,`emit`可以監(jiān)聽組件內拋出的事件

1. 通過配置項`on`監(jiān)聽事件

<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`監(jiān)聽事件
通過`emit`方式監(jiān)聽事件時,事件名稱中的大寫會自動轉換成`-`+小寫
例如`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`方法監(jiān)聽事件

<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>

posted @ 2024-06-03 11:13 xaboy 閱讀(272) 評論(0) 收藏舉報

刷新頁面返回頂部

xaboy的博客

學習記錄

使用form-create監(jiān)聽組件的事件

FormCreate 是一個可以通過 JSON 生成具有動態(tài)渲染、數(shù)據(jù)收集、驗證和提交功能的表單生成組件。支持5個UI框架，并且支持生成任何 Vue 組件。內置20種常用表單組件和自定義組件，再復雜的表單都可以輕松搞定

公告

xaboy的博客

學習記錄

使用form-create監(jiān)聽組件的事件

FormCreate 是一個可以通過 JSON 生成具有動態(tài)渲染、數(shù)據(jù)收集、驗證和提交功能的表單生成組件。支持5個UI框架，并且支持生成任何 Vue 組件。內置20種常用表單組件和自定義組件，再復雜的表單都可以輕松搞定

公告

FormCreate 是一個可以通過 JSON 生成具有動態(tài)渲染、數(shù)據(jù)收集、驗證和提交功能的表單生成組件。支持5個UI框架，并且支持生成任何 Vue 組件。內置20種常用表單組件和自定義組件，再復雜的表單都可以輕松搞定