1.0.40 • Published 7 months ago
antd-form-modal-pro v1.0.40
源码:https://github.com/coderjcy/AntdFormModalPro
属性(因为组件中最外层为 a-model,可以直接在组件上设置原生 a-model 的属性)
属性名 | 描述 | 类型 | 默认 | 必传 |
---|---|---|---|---|
model-value / v-model | 是否展示 | boolean | ✅ | |
formItems | 表单列的配置描述,具体项见下表 | IFormItem[] | ✅ | |
rules | 表单验证规则 | object | ||
span | 每个表单项所占据的份数(每行分为 24 份) | ISpan, (1~24) | 24 | |
labelWidth | label 标签的宽度 | string | 100px | |
minHeight | 表单的最小高度 | string | 300px | |
maxHeight | 表单的最大高度,超出最大高度变为滚动 | string | ||
dateValueFormat | 日期组件值的格式化规则 | string具体格式 | x | |
readonly | 表单是否只读 | boolean | false | |
title | 弹窗标题 | string |string,string,string | 表单 | |
confirmButtonText | 提交按钮的文字内容 | string | 保存 | |
cancellButtonText | 取消按钮的文字内容 | string | 取消 | |
data | 表单内容回显数据 | object | ||
submitCallback | 提交表单前的回调函数,函数返回 false 取消提交操作 | (formData) => boolean | ||
layout | 表单的排列方式 | "horizontal"|"vertical" | "horizontal" |
formItems 属性
属性名 | 描述 | 类型 | 默认 | 必传 |
---|---|---|---|---|
type | 表单项类型 | input、textarea、select、number、checkbox、radio、cascader、date、daterange、time、timerange、datetime、datetimerange、file、image 、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>
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