Flex

由开发者袁果锅精心打造的Flex组件，旨在为前端开发人员提供一套高效、灵活且易于使用的布局解决方案。该组件充分利用了 CSS Flexbox 布局模型的强大能力，旨在简化复杂 UI 界面的构建过程，特别是在处理元素对齐、分布和顺序调整方面。

Basic usage

The basic use case is using this component to provide unified space between each components

Using Space to provide space

袁果锅

API

Attributes

Name	Description	Type	Default
direction	Placement direction	`enum`	horizontal
class	Classname	`string` / `object` / `array`	—
style	Extra style rules	`string` / `object` / `array`	—
alignment	Controls the alignment of items	`string`	—
size	Spacing size	`string` / `array` / `number`	—
wrap	Auto wrapping	`boolean`	false
spaceBetween	Apply space-between layout	`boolean`	false
alignCenter	Align items to center	`boolean`	false
alignEnd	Align items to end	`boolean`	false
alignStart	Align items to start	`boolean`	false
justifyCenter	Justify content to center	`boolean`	false
justifyEnd	Justify content to end	`boolean`	false
justifyStart	Justify content to start	`boolean`	false
justifyBetween	Justify content with space-between	`boolean`	false
center	Center items both horizontally and vertically	`boolean`	false

Slots

name	description
default	Items to be spaced

Flex

Basic 基础使用

袁果锅

flex 全部用法

vue

<!-- @format -->

<template>
  <div>
    <el-form-pro @register="theFormPro" @submit="onHandleSubmit">
      <template #slotANode="{ model }">
        <div @click="model.nickname = '1'">
          插槽1[点击修改nickname值]{{ model }}
        </div>
        <br />
        <div @click="model.checkboxGroup = ['1']">
          插槽3[点击修改checkboxGroup值]{{ model }}
        </div>
      </template>
      <template #slotANode2>
        <div style="width: 100px; height: 100px; background-color: skyblue">
          插槽2
        </div>
      </template>
    </el-form-pro>

    <el-space direction="vertical" wrap>
      <el-button @click="onGetFormProFieldsValue">
        获取所有字段值 getFieldsValue
      </el-button>
      <el-button @click="onSetFormProFieldsValue">
        动态给字段赋值 setFieldsValue
      </el-button>
      <el-button @click="onResetFormProFields">
        清空字段 resetFields
      </el-button>
      <el-button @click="onClearFormProValidate">
        清空校验 clearValidate
      </el-button>
      <el-button @click="onClearFormProValidate('nickname')">
        清空校验单个校验 clearValidate(name:string)
      </el-button>
    </el-space>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
// import { ElFormPro } from '@element-plus/components/form-pro'
import ElFormPro, { useFormPro } from '@element-plus/components/form-pro'
import ElSpace from '@element-plus/components/space'
import ElButton from '@element-plus/components/button'
const [
  theFormPro,
  {
    setProps: setFormProProps,
    setFieldsValue: setFormProFieldsValue,
    getFieldsValue: getFormProFieldsValue,
    resetFields: resetFormProFields,
    clearValidate: clearFormProValidate,
    // getChildrenFieldsValue,
    // resetFields,
    // resetAllModel,
    // updateSchema,
    // removeSchemaByFiled,
    // appendSchemaByField,
    // validateFields,
    // validate,
    // submit,
    // reset,
    // resetAllModel,
    // clearValidate,
    // updateSchema,
    // removeSchemaByFiled,
  },
] = useFormPro()

// import type { FormProSchema } from '@element-plus/components/form-pro'

// 布局
const theLayoutData = {
  rowOptions: {
    gutter: 20,
  },
  labelCol: {
    span: 4,
    md: {
      span: 6,
    } as any,
    xxl: {
      span: 7,
    } as any,
  },
  wrapperCol: {
    span: 20,
    md: {
      span: 14,
    } as any,
    xxl: {
      span: 9,
    } as any,
  },
  actionColOptions: {
    span: 4,
    offset: 4,
    md: {
      offset: 6,
    } as any,
    xxl: {
      offset: 7,
    } as any,
  },
}
// 数据: FormProSchema
const onGetSchemaData = () => {
  const generateData = () => {
    const data: any[] = []
    for (let i = 1; i <= 15; i++) {
      data.push({
        key: i,
        label: `Option ${i}`,
        disabled: i % 4 === 0,
      })
    }
    return data
  }
  return {
    schemas: [
      {
        field: 'nickname',
        components: 'Input',
        label: '姓名',
        ifShow: () => true,
        dynamicRules: (ruleParams) => {
          const { nickname } = ruleParams
          return {
            required: true,
            // message: '请输入姓名',
            validator: () => {
              if (!nickname) {
                return Promise.reject(new Error('请输入姓名'))
              }
              return Promise.resolve()
            },
          }
        },
      },
      {
        field: 'phone',
        components: 'Input',
        label: '手机号',
        dynamicRules: (ruleParams) => {
          const { phone } = ruleParams
          return {
            required: true,
            // message: '请输入活动名称',
            validator: () => {
              if (!phone) {
                return Promise.reject(new Error('请输入手机号'))
              }
              return Promise.resolve()
            },
          }
        },
      },
      {
        field: 'textarea 输入框',
        components: 'Input',
        label: 'textarea',
        componentProps: {
          placeholder: '测试使用componentProps --  textarea',
          type: 'textarea',
        },
      },
      {
        field: 'inputNumber 输入框',
        components: 'InputNumber',
        label: 'InputNumber',
        componentProps: {
          min: 10,
          max: 20,
        },
      },
      {
        field: 'mention',
        components: 'Mention',
        label: 'Mention提及',
        modelValue: '@',
        componentProps: {
          placeholder: 'componentProps -- Mention提及',
          options: [
            {
              label: 'Fuphoenixes',
              value: 'Fuphoenixes',
            },
            {
              label: 'kooriookami',
              value: 'kooriookami',
            },
            {
              label: 'Jeremy',
              value: 'Jeremy',
            },
            {
              label: 'btea',
              value: 'btea',
            },
          ],
        },
      },

      {
        field: 'showComp',
        components: 'Select',
        label: '显示子组件',
        componentProps: {
          style: {
            width: '300px',
          },
          placeholder: '测试使用componentProps --  Select a value',
          options: [
            {
              label: '显示',
              value: '1',
            },
            {
              label: '不显示',
              value: '2',
            },
          ],
        },
      },
      {
        field: 'isShow',
        components: 'Input',
        label: 'isShow',
        ifShow: (e: any) => {
          return e.showComp == '1'
        },
      },
      {
        field: 'slot',
        components: 'Slot',
        slotName: 'slotANode',
        label: 'slot组件',
      },
      {
        field: 'slot2',
        components: 'Slot',
        slotName: 'slotANode2',
        label: 'slot组件2',
      },

      {
        field: 'radio',
        components: 'Radio',
        label: 'radio组件',
        componentProps: {
          label: '男',
          value: '1',
        },
      },
      {
        field: 'radioGroup',
        components: 'RadioGroup',
        label: 'radioGroup组件',
        componentProps: {
          options: [
            {
              label: '男',
              value: '1',
            },
            {
              label: '女',
              value: '2',
            },
          ],
        },
      },
      {
        field: 'RadioButton',
        components: 'RadioButton',
        label: 'radioButton组件',
        componentProps: {
          options: [
            {
              label: '男',
              value: '1',
            },
            {
              label: '女',
              value: '2',
            },
          ],
        },
      },
      {
        field: 'checkbox',
        components: 'Checkbox',
        label: 'Checkbox组件',
        componentProps: {
          label: '男',
          value: '1',
        },
      },
      {
        field: 'checkboxGroup',
        components: 'CheckboxGroup',
        label: 'CheckboxGroup组件',
        componentProps: {
          options: [
            {
              label: '男',
              value: '1',
            },
            {
              label: '女',
              value: '1231232',
            },
          ],
        },
      },
      {
        field: 'CheckboxButton',
        components: 'CheckboxButton',
        label: 'CheckboxButton组件',
        componentProps: {
          options: [
            {
              label: '男',
              value: '1',
            },
            {
              label: '女',
              value: '1231232',
            },
          ],
        },
      },
      {
        field: 'rate',
        components: 'Rate',
        label: 'Rate 评分',
      },
      {
        field: 'slider',
        components: 'Slider',
        label: 'slider 滑块',
        componentProps: {
          style: {
            width: '600px',
          },
          showInput: true,
        },
      },
      {
        field: 'switch',
        components: 'Switch',
        label: 'Switch 开关',
      },
      {
        field: 'transfer',
        components: 'Transfer',
        label: 'transfer 穿梭框',
        componentProps: {
          data: generateData(),
        },
      },
      {
        field: 'treeSelect',
        components: 'TreeSelect',
        label: 'TreeSelect 树型选择',
        componentProps: {
          'render-after-expand': false,
          style: {
            width: '300px',
          },
          data: [
            {
              value: '1',
              label: 'Level one 1',
              children: [
                {
                  value: '1-1',
                  label: 'Level two 1-1',
                  children: [
                    {
                      value: '1-1-1',
                      label: 'Level three 1-1-1',
                    },
                  ],
                },
              ],
            },
            {
              value: '2',
              label: 'Level one 2',
              children: [
                {
                  value: '2-1',
                  label: 'Level two 2-1',
                  children: [
                    {
                      value: '2-1-1',
                      label: 'Level three 2-1-1',
                    },
                  ],
                },
                {
                  value: '2-2',
                  label: 'Level two 2-2',
                  children: [
                    {
                      value: '2-2-1',
                      label: 'Level three 2-2-1',
                    },
                  ],
                },
              ],
            },
            {
              value: '3',
              label: 'Level one 3',
              children: [
                {
                  value: '3-1',
                  label: 'Level two 3-1',
                  children: [
                    {
                      value: '3-1-1',
                      label: 'Level three 3-1-1',
                    },
                  ],
                },
                {
                  value: '3-2',
                  label: 'Level two 3-2',
                  children: [
                    {
                      value: '3-2-1',
                      label: 'Level three 3-2-1',
                    },
                  ],
                },
              ],
            },
          ],
        },
      },
      {
        field: 'Avatar',
        components: 'Avatar',
        label: 'Avatar 头像',
        componentProps: {
          shape: 'square',
          size: 'large',
          src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        },
      },
    ],
    showFooter: true,
    ...theLayoutData,
  }
}
const onHandleSubmit = (e: any, e2: any) => {
  console.log('onHandleSubmit ===>', e, e2)
}

const onGetFormProFieldsValue = () => {
  console.log('onGetFormProFieldsValue ===>', getFormProFieldsValue())
}
const onResetFormProFields = () => {
  resetFormProFields()
}
const onClearFormProValidate = (name?: any) => {
  clearFormProValidate(name)
}
const onSetFormProFieldsValue = () => {
  setFormProFieldsValue({
    nickname: '1161',
  })
}
onMounted(() => {
  setFormProProps(onGetSchemaData())
})
</script>

Flex API

支持的组件

>>>支持的组件<<<

FormPro Attributes

tip:所有参数都可以通过 useFormPro 的回调函数 ==> setProps 赋值

Name	Description	Type	Default
schemas	表单配置规则	`Array`	() => []
showFooter	是否显示底部按钮	`Boolean`	true
rowOptions	表单行 Row - 行布局	`object`	() => ({ gutter: 20 })
labelCol	表单列 Col - label 布局	`object`	() => ({ span: 4 })
wrapperCol	表单列 Col - 表单内容布局	`object``	() => ({ span: 18 })
actionColOptions	表单底部布局	`object`	() => (

schemas 配置

Name	Description	Type	其他介绍
field	表单字段绑定值	`Array`	() => []
label	表单字段名	`Boolean`	true
components	绑定的组件	`Object`	支持的组件
modelValue	字段绑定值	`Object`	可以赋予默认值使用
ifShow	字段是否显示	`Object``	(formValues: any, formValues2: any, formValues3: any) => boolean
dynamicRules	自定义校验	`Function`	(formValues: any) => Boolean
message	快捷校验内容	`String`	——
componentProps	根组件传参	`Object`	根组件传参所需的值可通过对象在此绑定
slotName	插槽名称	`String`	当组件类型为插槽时，须配合 slotName 添加具名插槽名称
end	底部插入	`Function`	可配合 h 函数使用 ( )=>{ h( [ div,{},

FormPro 事件

Name	Description	回调函数
register	使用 useFormPro 的回调	`Object`
submit	验证成功的确定回调	`Object`
submit-error	验证失败的确定回调	`Object`
reset	点击重置的回调	`Object`

Source

Component • Docs

Flex ​

Basic usage ​

API ​

Attributes ​

Slots ​

Flex ​

Basic 基础使用 ​

flex 全部用法 ​

Flex API ​

支持的组件 ​

FormPro Attributes ​

schemas 配置 ​

FormPro 事件 ​

Source ​

Contributors ​

Flex

Basic usage

API

Attributes

Slots

Flex

Basic 基础使用

flex 全部用法

Flex API

支持的组件

FormPro Attributes

schemas 配置

FormPro 事件

Source

Contributors