通过扩展API打开弹窗

FormCreate 提供了一种灵活的方式，通过 extendApi 方法来扩展和自定义 API。这样，开发者可以根据具体需求，在应用中轻松实现特定功能。在本文中，我们将展示如何扩展 API 来打开弹窗提醒。

基本扩展API方法

首先，我们来看一下如何通过 extendApi 方法为 FormCreate 添加一个基本的自定义 API 方法。

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


//建议定义在main.js中
formCreate.extendApi((api) => {
  api.customMethod = function() {
    // 执行自定义操作
    console.log('这是一个自定义 API 方法');
  }
});

扩展弹窗方法

接下来，我们将展示如何为 API 扩展一个弹窗提醒的方法，通过调用此方法，可以在表单中弹出一条提示消息。

复制成功!

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

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

export default {
  data() {
    return {
      fApi: {},
      options: {
        submitBtn: false,
        onSubmit: (formData) => {
          alert(JSON.stringify(formData))
        }
      },
      rule: [
        {
          type: 'el-button',
          inject: true,
          on: {
            click(inject){
              inject.api.message('打开弹窗');
            }
          },
          children: ['打开弹窗']
        }
      ]
    }
  },
  created() {
    //推荐写在main.js中
    formCreate.extendApi((api) => {
      api.message = (msg, type) => {
        return ElMessage({
          message: msg,
          type: type || 'info',
        });
      };
    })
  }
}
</script>

实现代码

我们将使用 Element Plus 提供的 ElMessage 来实现弹窗功能。

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


// 扩展API,建议定义在main.js中
formCreate.extendApi((api) => {
  /**
   * 扩展一个 message 方法用于显示弹窗
   * @param {string} msg - 要显示的消息内容
   * @param {string} [type='info'] - 消息类型 ('success', 'warning', 'info', 'error')
   */
  api.message = (msg, type = 'info') => {
    return ElMessage({
      message: msg,
      type: type, // 默认为 'info'
    });
  };
});

使用示例

在表单中调用扩展后的 API 进行弹窗操作。

<template>
  <form-create :rule="rules" @submit="handleSubmit"></form-create>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
  setup() {
    const rules = [
      {
        type: 'input',
        field: 'username',
        title: '用户名',
        props: {
          placeholder: '请输入用户名'
        }
      }
    ];
    const handleSubmit = (formData, $f) => {
      // 使用扩展的 message 方法显示提交成功的弹窗
      $f.api.message('表单提交成功！', 'success');
    };
    return {
      rules,
      handleSubmit
    };
  }
});
</script>

解释

• ElMessage: ElMessage 是来自于 element-plus 的组件，提供了一种简便的方式来创建各种类型的消息提示。
• 扩展方法 message: 新增的 message 方法接受两个参数：msg 是要显示的文本，type 是消息类型，可选值包括 'success', 'warning', 'info', 和 'error'。

注意事项

• UI库依赖: 这个扩展方法基于 Element Plus。如需在其他 UI 库中使用，需要替换消息组件。
• 方法安全性: 扩展方法应避免引入复杂的业务逻辑，以保持接口的简洁性和一致性。

这种通过扩展 API 增强表单功能的做法，极大地提高了开发的灵活性和代码拓展性。希望本文能帮助您创建更具互动性的表单应用。