1.0.40 • Published 7 months ago

antd-form-modal-pro v1.0.40

Weekly downloads
-
License
-
Repository
-
Last release
7 months ago
  1. 源码:https://github.com/coderjcy/AntdFormModalPro

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

属性名描述类型默认必传
model-value / v-model是否展示boolean
formItems表单列的配置描述,具体项见下表IFormItem[]
rules表单验证规则object
span每个表单项所占据的份数(每行分为 24 份)ISpan, (1~24)24
labelWidthlabel 标签的宽度string100px
minHeight表单的最小高度string300px
maxHeight表单的最大高度,超出最大高度变为滚动string
dateValueFormat日期组件值的格式化规则string具体格式x
readonly表单是否只读booleanfalse
title弹窗标题string |string,string,string表单
confirmButtonText提交按钮的文字内容string保存
cancellButtonText取消按钮的文字内容string取消
data表单内容回显数据object
submitCallback提交表单前的回调函数,函数返回 false 取消提交操作(formData) => boolean
layout表单的排列方式"horizontal"|"vertical""horizontal"
  1. formItems 属性

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

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

插槽名说明
title表单标题
handle操作部分
  1. 实例属性(Exposes)

属性名说明类型
formData表单数据object
formRef组件中的 a-form 的实例object
create新增表单() => void
update修改表单(data) => void
Info查看表单(data) => void
  1. 黑夜模式:通过在 body 元素上添加“dark”类启用

  2. 添加下列代码到 /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 {};
  1. tsconfig.json 文件中配置

{
  "compilerOptions": {
    "moduleResolution": "bundler"
  }
}
  1. 添加下列代码到 /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");
  1. 示例

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

7 months ago

1.0.39

7 months ago

1.0.38

7 months ago

1.0.40

7 months ago

1.0.36

8 months ago

1.0.35

8 months ago

1.0.34

8 months ago

1.0.29

9 months ago

1.0.33

9 months ago

1.0.32

9 months ago

1.0.31

9 months ago

1.0.30

9 months ago

1.0.26

9 months ago

1.0.24

9 months ago

1.0.22

9 months ago

1.0.21

9 months ago

1.0.20

9 months ago

1.0.19

9 months ago

1.0.18

9 months ago

1.0.17

9 months ago

1.0.16

9 months ago

1.0.10

9 months ago

1.0.15

9 months ago

1.0.14

9 months ago

1.0.13

9 months ago

1.0.12

9 months ago

1.0.8

9 months ago

1.0.7

9 months ago

1.0.2

10 months ago

1.0.1

10 months ago

1.0.0

10 months ago

1.0.6

10 months ago

1.0.5

10 months ago

1.0.3

10 months ago

1.0.11

10 months ago

0.0.32

10 months ago

0.0.33

10 months ago

0.0.91

10 months ago

0.0.92

10 months ago

0.0.93

10 months ago

0.0.9

10 months ago

0.0.8

10 months ago

0.0.7

10 months ago

0.0.6

10 months ago

0.0.3

10 months ago

0.0.2

10 months ago

0.0.5

10 months ago

0.0.4

10 months ago

0.0.1

10 months ago

0.0.0

10 months ago