PenkForm 表单

专门用于后台管理系统，因为 Form 都是固定的一些配置，比如 input，select，radio，checkBox...等等配置。 PenkForm 通过传递 JSON 对象，配置其 Form 表单各个 FormItem 项。

基础用法

在按照文档配置，进行了 Penk-Ui 依赖包的安装后，就可以直接使用。

// xxx.vue template
  <PenkForm
    :title="title"
    :formConfig="formConfig"
    :formData="formData"
    v-model:visible="visible"
    append-to-body
    @confirm="saveItem"
  >
  </PenkForm>

获取表单数据

@confirm 是 PenkForm 的一个事件，触发条件是点击 Form 表单的确定按钮，并且 Form 表单数据符合 rule 才会触发

// 新增，编辑数据
function saveItem(form: any) {
  console.log(form);
}

配置

这里的配置包括 Form 表单的配置，如果是有数据项的传递 data 数组;
还有 Form 对应 rules，包括每一项配置，或者全局配置，或者自定义配置都有。

// xxx.vue script
<script setup lang="ts">
  const formConfig: any = {
  formItemConfig: [
    {
      label: "用户类型",
      prop: "userType",
      type: "select",
      data: [
        { label: "游客", value: 1 },
        { label: "管理员", value: 2 },
      ],
      // Form item 局部 rules配置
      rules: {
        required: true,
        message: "请选择用户类型",
        trigger: "blur",
      },
    },
    {
      label: "用户名",
      prop: "userName",
      type: "input",
    },
    {
      label: "密码",
      prop: "passWord",
      type: "input",
    },
    {
      label: "手机",
      prop: "phone",
      type: "input",
    },
    {
      label: "邮箱",
      prop: "email",
      type: "input",
    },
    {
      label: "头像",
      prop: "url",
      type: "upload",
    },
  ],
  rules: {
    // 自定义校验
    userName: [
      {
        required: true,
        validator: (rule: any, value: any, callback: any) => {
          if (!value) {
            callback(new Error("请输入用户名"));
          }
          callback();
        },
        trigger: "blur",
      },
    ],
    // Form 全局 rules配置
    passWord: [
      {
        required: true,
        message: "请输入密码",
        trigger: "blur",
      },
    ],
  },
};

</script>

PenkForm TypeScript 接口声明

interface props {
  // 以下是el-form  的配置
  // 编辑时候的formData数据
  formData: any;
  // form配置 包括form item 以及 rules
  formConfig: formConfig;

  // 以下是el-dialog 的配置
  visible: boolean;
  // dialog配置
  width?: string | number;
  // 弹框标题
  title: string;
  // 是否为全屏 Dialog
  fullscreen?: boolean;
  // 为 Dialog 启用可拖拽功能
  draggable?: boolean;
  // Dialog 自身是否插入至 body 元素上。 嵌套的 Dialog 必须指定该属性并赋值为 true
  "append-to-body"?: boolean;
  // 是否可以通过点击 modal 关闭 Dialog
  "close-on-click-modal"?: boolean;
}

interface formConfig {
  // 每一项的配置
  formItemConfig: formItemConfig;
  // 规则
  // https://element-plus.gitee.io/zh-CN/component/form.html#自定义校验规则
  rules: any;
}

// 单个form item 的属性
interface formItemConfig {
  // 必填
  // 标签名
  label: string;
  // 对应的属性名 如： from.name ~
  prop: string;
  // 组件所需类型，下拉框或者输入框
  type: FormItemType;
  // 默认值
  default: any;

  // 选填-通用
  // 宽度
  width?: number;
  // 占位符
  placeholder?: string;
  // 是否清空
  clearable?: boolean;
  // 是否使能
  disabled?: boolean;
  // 是否隱藏
  hidden?: boolean;

  // 选填
  // 特殊组件参数
  // 输入框判断是否文本域
  inputType?: string;
  // 输入框为文本域的时候的行数
  row: number;

  // 选填-特殊
  // 数据，一般是下拉框之类需要可选项的才用到
  data?: any;
}

declare type FormItemType = "input" | "select" | "radio" | "checkbox";

PenkForm API

PenkForm 属性

属性名	说明	类型	默认值
formData	必填，编辑时候的 formData 数据	object	---
formConfig	必填，form 配置包括 form item 以及 rules	formConfig	---
visible	必填，el-dialog 的配置对应的 visible	boolean	false
width	选填，el-dialog 的配置对应的 width	string 或 number	---
title	必填，el-dialog 的配置对应的标题	string	---
fullscreen	选填，el-dialog 的配置对应是否为全屏	boolean	false
draggable	选填，el-dialog 的配置对应是否可拖拽	boolean	false
append-to-body	选填，el-dialog 的配置对应是否插入至 body 元素上	boolean	false
close-on-click-modal	选填，el-dialog 的配置对应是否可以通过点击 modal 关闭 Dialog	boolean	false

formConfig 属性

属性名	说明	类型	默认值
formItemConfig	必填，Form 表单每一项的配置	formItemConfig	---
rules	必填，Form 表单 rules 规则跳转	any	---

PenkForm 对外暴露的属性或者方法

方法名	说明	类型
confirm	@saveItem 是 PenkForm 的一个事件，触发条件是点击 Form 表单的确定按钮，并且 Form 表单数据符合 rule 才会触发，参数就是form表单里面的数据	(form:any):void

PenkForm 表单 #

基础用法 #

获取表单数据 #

配置 #

PenkForm TypeScript 接口声明 #

PenkForm API #

PenkForm 属性 #

formConfig 属性 #

PenkForm 对外暴露的属性或者方法 #