【vue3组件封装】Form和FormItem表单

Vue组件：SForm与SFormItem实现复选框与表单布局

最新推荐文章于 2025-10-14 06:57:29 发布

原创最新推荐文章于 2025-10-14 06:57:29 发布 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

组件封装专栏收录该内容

7 篇文章

订阅专栏

该博客介绍了如何使用Vue实现Form和FormItem组件，用于构建包含复选框和单选框的表单布局。SForm组件接受宽度和labelCol属性，而SFormItem则用于展示表单元素，如IP地址输入框，支持自定义宽度和label。通过封装这两个组件，可以方便地创建和布局表单，同时提供了表单验证规则，例如检查IP地址是否为空及格式正确。

历史文章

含校验的Input
checkbox复选框与复选框组，radioGroup单选框

Form和FormItem

这个组件主要用于表单的布局，下面涉及的其他组件可参考历史文章。

Form可以接受width和labelCol，分别表示表单宽度和label所占宽度
FormItem可以接受width、labelCol和label，前两者可以覆盖父组件传过来的

使用

<s-form width="400px" :labelCol="2">
  <s-form-item label="IP地址">
      <s-input
          :rules="[
             { type: 'required', message: 'ip不能为空' },
             { type: 'ip', message: 'ip格式不对' },
          ]"
          :value="form.ip"
          @update="updateForm"
          name="ip"
      />
  </s-form-item>
</s-form>

封装

SForm.vue

<script lang="ts">
import { h } from "vue"

export default {
  name: "SForm",
  props: {
    width: String,		// 表单宽度
    labelCol: Number	// label所占宽度的比例
  },
  setup (props, context) {
    if (!context.slots || !context.slots.default) return null
      
    // 将form的属性传给formitem
    const slots = context.slots.default().map(slot => ({
      ...slot,
      props: {
        ...props,		// 父组件form的属性
        ...slot.props	// 子组件formitem的属性，如果有，会覆盖父组件form的属性（以增强子组件样式的优先级
      }
    }))
    return () => h("div", {
      className: "s-form"
    }, slots)
  }
}

</script>
<style lang="less">
    .s-form{
        .s-form-item{
            margin-top: 10px
        }
    }
</style>

SFormItem.vue

<template>
    <div class="s-form-item" :style="{width}">
        <div class="label" :style="{width:labelWidth}">{{label?`${label}：`:' '}}</div>
        <slot></slot>
    </div>
</template>

<script lang="ts">
export default {
  name: "s-form-item",
  props: {
    label: {			// label名称
      type: String,
      default: ""
    },
    width: {			// 占表格宽度的百分比
      type: String,
      default: "100%"
    },
    labelCol: {			// label所占宽度
      type: Number,
      default: 1
    }
  },
    
  setup (props: {labelCol:number, width:string}) {
    const persents = ["10%", "20%", "30%", "40%", "50%", "60%", "80%", "90%", "100%"]
    const labelWidth = persents[props.labelCol]
    return {
      labelWidth,
      ...props
    }
  }
}

</script>
<style lang="less" scoped>
  .s-form-item{
    display: flex;
    align-items: baseline;
    .label{
      text-align: right;
    }
  }
</style>