antd-form-modal-pro

1. 源码：https://github.com/coderjcy/AntdFormModalPro

2. 属性（因为组件中最外层为 a-model，可以直接在组件上设置原生 a-model 的属性）

3. formItems 属性

4. 事件

5. 插槽

6. 实例属性（Exposes）

7. 黑夜模式：通过在 body 元素上添加“dark”类启用

8. 添加下列代码到 /src/components.d.ts 文件中（用于类型提示）

import type { AntdFormModal, IProps2 as _IProps, IFormItem as _IFormItems } from "antd-form-modal-pro";
declare module "vue" {
  export interface GlobalComponents {
    AntdFormModal: AntdFormModal;
  }
}
declare global {
  interface IProps extends _IProps {}
  interface IFormItem extends _IFormItems {}
}
export {};

9. tsconfig.json 文件中配置

{
  "compilerOptions": {
    "moduleResolution": "bundler"
  }
}

10. 添加下列代码到 /src/main.ts 文件中

import { createApp } from "vue";
import App from "./App.vue";
import AntdFormModal from "antd-form-modal-pro";
import "antd-form-modal-pro/style.css";
createApp(App).use(AntdFormModal).mount("#app");

11. 示例

<template>
  <div>
    <antd-form-modal v-model="isShow" :formItems>
      <template #test2="{formData,config}">
        <input v-model="formData.test2" />
      </template>

      <template #test3="{formData,config}">
        <div>123</div>
      </template>
    </antd-form-modal>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const isShow = ref(false);
const formItems = [
  {
		label: "测试show",
    prop: "test",
    type: "input",
  },
  {
    label: "姓名",
    prop: "12",
    type: "select",
    labelWidth: "100px",
    show:(formData)=>{
      return formData.value.test === 'pass'
    }
    attrs: {
      placeholder: "请选择",
      options: [
        { label: "a", value: "a" },
        { label: "b", value: "b" },
      ],
      // 监听事件的第一种方法,会额外返回formData对象
      "@change": (formData, ...args) => {
        console.log("formData", formData);
        console.log("args", args);
      },
    },
    events: {
      // 监听事件的第二种方法
      change: (...args) => {
        console.log("args", args);
      },
    },
  },
  {
    type:'custom', //
    label:'测试2',
    prop:'test2', // 这里的prop作为插槽名
  },
  {
    type:'custom-full',   // 类型为custom-full时，label部分也会消失，该部分完全自定义，所以无需设置label属性
    prop:'test3',
  },
  // ......
];
</script>