基于 Vben Admin 的 FormModal 【表单弹窗】 组件封装实践 (二：组件实现——vue篇)

基于 Vben Admin 的 FormModal 组件封装实践（二：组件实现——vue篇)

---

前言

上一篇文章中介绍了表单弹窗的用法与优点，现在开始讲实现。

ps:本来想一篇文章写完实现的，但似乎有点长，那么再拆成vue和hook两个部分吧。

---

正文

先简单回顾一下我们的需求

1. 将表单和弹窗合二为一作为一个组件去管理
2. 将常用事件封装在组件内

表单部分

1. 先按项目的需求，配置好一个基础的表单。

const [Form, formApi] = useVbenForm({
   
   
  commonConfig: {
   
   
    colon: true,
    formItemClass: 'col-span-2 md:col-span-1',
    labelClass: 'justify-start',
    labelWidth: 100,
  },
  schema: schemaData as unknown as VbenFormSchema[],
  showDefaultActions: false,
  wrapperClass: 'grid-cols-2 gap-x-4',
});

const breakpoints = useBreakpoints(breakpointsTailwind);
const isHorizontal = computed(() => breakpoints.greaterOrEqual('md').value);
const formLayout = computed(() => {
   
   
  const {
   
    formConfig } = innerProps.value;
  if (formConfig && formConfig.layout) return formConfig.layout;
  return isHorizontal.value ? 'horizontal' : 'vertical';
});


<Form :class="[innerProps.formClass ?? '']" :layout="formLayout">...</Form>

2. 允许通过参数控制表单的配置

const schemaData = ref<VbenFormSchema[]>();
function setProps(props: Partial<FormModalProps&g