Form 表单

我想要告诉你一些事情

import { DuForm, DuFormItem } from 'dangoui'

自定义表单项指南

TODO

实际业务中，免不了一些适用于特定业务的...如何去自定义呢？

表单项下面有元素怎么解决？

示例

完整例子

<template>
  <DuCard class="important-mt-4px" title="创建商品" guide-text="">
      <DuForm label-size="80px">
        <DuFormItem label="商品图片" required :show-border="false">
          <DuUpload :value="productImages" />
        </DuFormItem>
        <DuFormItem label="商品名称" required>
          <DuInput
            placeholder="请输入商品名称"
            :trim="true"
          />
        </DuFormItem>
        <DuFormItem label="价格" info="请输入整数" required tips="金额不能小于5元">
          <DuInput
            placeholder="请输入金额"
            :trim="true"
            prefix="￥"
            suffix="精确到整数"
          />
        </DuFormItem>
        <DuFormItem label="库存" required>
          <DuInput
            placeholder="数量"
            :trim="true"
          />
        </DuFormItem>
        <DuFormItem label="限购" required>
          <DuInputNumber />
        </DuFormItem>
        <DuFormItem label="发货模式" required :show-border="false">
          <DuRadioGroup :value="1">
            <DuRadio label="直接物流" :value="1" />
            <DuRadio label="寄存柜" :value="2" />
            <DuRadio label="自提" :value="3" />
          </DuRadioGroup>
        </DuFormItem>
        <DuFormItem label="支付方式" required :show-border="false">
          <DuCheckboxGroup :value="['1']" inline>
            <DuCheckbox label="支付宝" value="1" />
            <DuCheckbox label="微信" value="2" />
          </DuCheckboxGroup>
        </DuFormItem>
        <DuFormItem label="垂直排列" required :show-border="false">
          <DuCheckboxGroup :value="['1']">
            <DuCheckbox label="支付宝" value="1" />
            <DuCheckbox label="微信" value="2" />
          </DuCheckboxGroup>
        </DuFormItem>
        <DuFormItem label="极速模式" :show-border="false" required>
          <DuSwitch :on="true" />
        </DuFormItem>
        <DuButton full size="large" ext-class="!mt-8px">
          发布
        </DuButton>
      </DuForm>
  </DuCard>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {
  DuButton,
  DuForm,
  DuFormItem,
  DuInput,
  DuCard,
  DuRadioGroup,
  DuRadio,
  DuCheckboxGroup,
  DuCheckbox,
  DuInputNumber,
  DuUpload,
  DuSwitch,
} from 'dangoui'

const productImages = ref([
  {
    uid: 1,
    url: '',
    thumbUrl: 'https://cdn.qiandaoapp.com/interior/images/1ab88333caa868a7f2bdfc0bbd3df1f6.jpg'
  },
  {
    uid: 2,
    url: '',
    thumbUrl: 'https://cdn.qiandaoapp.com/interior/images/1ab88333caa868a7f2bdfc0bbd3df1f6.jpg'
  },
  {
    uid: 3,
    url: '',
    thumbUrl: 'https://cdn.qiandaoapp.com/interior/images/1ab88333caa868a7f2bdfc0bbd3df1f6.jpg'
  },
])
</script>

垂直布局

<template>
  <DuCard class="important-mt-4px" title="创建商品" guide-text="">
      <DuForm label-size="80px" layout="vertical">
        <DuFormItem label="商品名称" required>
          <DuInput
            placeholder="请输入商品名称"
            :trim="true"
          />
        </DuFormItem>
        <DuFormItem label="价格" info="请输入整数" required tips="金额不能小于5元">
          <DuInput
            placeholder="请输入金额"
            :trim="true"
            prefix="￥"
            suffix="精确到整数"
          />
        </DuFormItem>
        <DuFormItem label="库存" required>
          <DuInput
            placeholder="数量"
            :trim="true"
          />
        </DuFormItem>
        <DuFormItem label="发货模式" required>
          <DuRadioGroup :value="1" inline>
            <DuRadio label="直接物流" :value="1" />
            <DuRadio label="寄存柜" :value="2" />
            <DuRadio label="自提" :value="3" />
          </DuRadioGroup>
        </DuFormItem>
        <DuFormItem label="支付方式" required>
          <DuCheckboxGroup :value="['1']">
            <DuCheckbox label="支付宝" name="1" />
            <DuCheckbox label="微信" name="2" />
          </DuCheckboxGroup>
        </DuFormItem>
        <DuFormItem label="极速模式" required>
          <DuSwitch :on="true" />
        </DuFormItem>
        <DuButton full size="large" ext-class="!mt-8px">
          发布
        </DuButton>
      </DuForm>
  </DuCard>
</template>

<script setup lang="ts">
import { DuButton, DuForm, DuFormItem, DuInput, DuCard, DuRadioGroup, DuRadio, DuCheckboxGroup, DuCheckbox, DuSwitch } from 'dangoui'
</script>

API

Form 属性

属性名	类型	默认值
ext-class	`string \| string[] \| Record<string, boolean>`	`""`
ext-style	`string \| { [x: string]: string \| number; }`	`""`
options	`{ labelSize: string; labelAlign: "left" \| "right"; }`	-
label-size	`string`	`"60px"`
label-align	`"left" \| "right"`	`"left"`
layout	`"horizontal" \| "vertical"`	`"horizontal"`

Form 插槽

名称
default

FormItem 属性

属性名	类型	默认值	说明
required	`boolean`	`false`
ext-class	`string \| string[] \| Record<string, boolean>`	`""`
ext-style	`string \| { [x: string]: string \| number; }`	`""`
options	`{ label: string; labelAlign: "left" \| "right"; labelSize: string; tips: string; required: boolean; info: string; isDirty: boolean; extClass: string \| string[] \| Record<string, boolean>; extStyle: string \| { ...; }; }`	-
label	`string`	`""`
label-size	`string`	`""`
label-align	`"left" \| "right"`	`"left"`
tips	`string`	`""`
info	`string`	`""`
is-dirty	`boolean`	`false`
show-border	`boolean`	`true`
items	`"center" \| "start"`	-	内容区域的对齐方式，仅在 horizontal 模式下生效
layout	`"horizontal" \| "vertical"`	-
justify	`"start" \| "end"`	-	内容区域水平位置的对齐方式

FormItem 插槽

名称
default
tips

FormItem 事件

名称	类型
showInfo	`(event: "showInfo", info: string \| boolean): void`

FAQ

如何自定义一个适用于放在 FormItem 下的表单组件

单行情况下，推荐高度为 22px（以 375px 设计稿为基准）

TODO

formItem noStyle