YuiForm

基础用法

属性	值	说明
:labelPosition	top / left / right	表单域标签的位置， 当设置为 left 或 right 时，则也需要设置 label-width 属性
:inline	true/false	行内表单模式
:rules	FormRules	表单验证规则
:labelWidth	string/number	标签的长度，例如 '50px'。 作为 Form 直接子元素的 form-item 会继承该值。 可以使用 auto。
:model	-	表单数据对象
:field-list	-	表单项列表

引入组件

import { YuiForm } from "@/components/Form/index";

export default defineComponent({
  components: {
    YuiForm
  },
  
  setup(props) {
    const formData = reactive({
      fieldForm: {name:"ES meetup"},
      fieldList: [
        {
          field: "name",
          name: "活动名称",
          mold: "Input",
          formType: "text",
          // 检验唯一性
          isNull: 1,
        },
        {
          field: "region",
          name: "活动区域",
          mold: "Select",
          formType: "select",
          setting: [
            {
              label: "区域一",
              value: 0,
            },
            {
              label: "区域二",
              value: 1,
            },
          ],
        },
        {
          field: "date",
          name: "活动区域",
          mold: "Date",
          formType: "datetime",
        },
        {
          field: "deliver",
          name: "即时配送",
          mold: "Select",
          formType: "switch",
        },
        {
          field: "type",
          name: "活动性质",
          mold: "Select",
          formType: "checkbox-group",
          setting: [
            {
              label: "美食/餐厅线上活动",
            },
            {
              label: "地推活动",
            },
            {
              label: "线下主题活动",
            },
            {
              label: "单纯品牌曝光",
            },
          ],
        },
        {
          field: "resource",
          name: "资源",
          mold: "Select",
          formType: "radio-group",
          setting: [
            {
              label: "线上品牌商赞助",
              value: 0,
            },
            {
              label: "线下场地免费",
              value: 1,
            },
          ],
        },
        {
          field: "desc",
          name: "活动形式",
          mold: "Input",
          formType: "textarea",
          rows: 3,
        },
      ],
    });
    return {
      formData,
    };
  },
  
 )

使用标签：

 <yui-form 
 :field-list="formData.fieldList" 
 :field-form="formData.fieldForm"  
 />

效果