antd-form-modal-pro

v1.0.50

Published

7 months ago

1. ### 源码：https://github.com/coderjcy/AntdFormModalPro 2. ### 属性（因为组件中最外层为 a-model，可以直接在组件上设置原生 a-model 的属性）

0High
0Medium
0Low

coderjcy

vue3 frontend antd form dialog modal

源码：https://github.com/coderjcy/AntdFormModalPro
属性（因为组件中最外层为 a-model，可以直接在组件上设置原生 a-model 的属性）

formItems 属性

| 属性名 | 描述 | 类型 | 默认 | 必传 | | ------------ | ----------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------: | ---- | :--- | | type | 表单项类型 | input、textarea、select、number、checkbox、radio、cascader、date、daterange、time、timerange、datetime、datetimerange、file、image 、coordinate、custom、custom-full | | ✅ | | prop | 属性字段 | string | | ✅ | | label | 表单项 label | string | | | | labelWidth | label 标签的宽度 | string | | | | required | 是否必须填写 | boolean | | | | span | 表单项占据的份数 | ISpan， (1~24) | | | | initialValue | 初始默认值 | any | | | | show | 控制该表单项是否展示的计算函数 | (formData: Ref) => boolean; | | | | attrs | 表单项上需要绑定的原生属性 | object | | | | events | 表单项需要监听的原生事件 | object | | | | pagination | type 为 select 时，传入该属性用于实现分页选择项的设置 | (keyword: string, page: number)=>Promise | | |

事件

| 事件名 | 说明 | 类型 | | ---------- | -------------------------------- | ------------------ | | submit | 提交表单并且关闭弹窗后的回调函数 | (formData) => void |

插槽

| 插槽名 | 说明 | | ---------- | -------- | | title | 表单标题 | | handle | 操作部分 |

实例属性（Exposes）

| 属性名 | 说明 | 类型 | | ---------- | ---------------------- | -------------- | | formData | 表单数据 | object | | formRef | 组件中的 a-form 的实例 | object | | create | 新增表单 | () => void | | update | 修改表单 | (data) => void | | Info | 查看表单 | (data) => void |

黑夜模式：通过在 body 元素上添加“dark”类启用
添加下列代码到 /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 {};

tsconfig.json 文件中配置

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

添加下列代码到 /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");

示例

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

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

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

formItems 属性

事件

插槽

实例属性（Exposes）

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

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

tsconfig.json 文件中配置

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

示例