Open Dialogs Through Extended API

FormCreate provides a flexible way to extend and customize APIs through the extendApi method. This allows developers to easily implement specific functionality in applications based on their needs. In this guide, we will show how to extend the API to open dialog notifications.

Basic Extended API Method

First, let's see how to add a basic custom API method to FormCreate using the extendApi method.

import formCreate from '@form-create/element-ui';


//Recommended to define in main.js
formCreate.extendApi((api) => {
  api.customMethod = function() {
    // Perform custom operations
    console.log('This is a custom API method');
  }
});

Extend Dialog Method

Next, we will show how to extend a dialog notification method for the API. By calling this method, a notification message can be displayed in the form.

Implementation Code

We will use the ElMessage provided by Element Plus to implement the dialog functionality.

import { ElMessage } from 'element-plus';
import formCreate from '@form-create/element-ui';


// Extend API, recommended to define in main.js
formCreate.extendApi((api) => {
  /**
   * Extend a message method to display dialogs
   * @param {string} msg - The message content to display
   * @param {string} [type='info'] - Message type ('success', 'warning', 'info', 'error')
   */
  api.message = (msg, type = 'info') => {
    return ElMessage({
      message: msg,
      type: type, // Default is 'info'
    });
  };
});

Usage Example

Call the extended API in the form to perform dialog operations.

<template>
  <form-create :rule="rules" @submit="handleSubmit"></form-create>
</template>
<script>
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    const rules = ref([
      {
        type: 'input',
        field: 'username',
        title: 'Username',
        props: {
          placeholder: 'Enter username'
        }
      }
    ]);
    const handleSubmit = (formData, $f) => {
      // Use the extended message method to display a success dialog
      $f.api.message('Form submitted successfully!', 'success');
    };
    return {
      rules,
      handleSubmit
    };
  }
});
</script>

Explanation

• ElMessage: ElMessage is a component from element-plus that provides a convenient way to create various types of message notifications.
• Extended Method message: The new message method accepts two parameters: msg is the text to display, and type is the message type, with options including 'success', 'warning', 'info', and 'error'.

Notes

• UI Library Dependency: This extended method is based on Element Plus. If you need to use it in other UI libraries, you need to replace the message component.
• Method Safety: Extended methods should avoid introducing complex business logic to maintain the simplicity and consistency of the interface.

This approach of enhancing form functionality through extended APIs greatly improves development flexibility and code extensibility. We hope this guide helps you create more interactive form applications.