Form

使用formcreate二次开发，更方便使用。

基础用法

可以直接传递formData获取地址实现form自动渲染。

basic.vue

<template>
  <dk-form
    :form-url="{
      url: '/adminapi/attachment/group/19/edit',
      method: 'get',
    }"
    @submit="submit"
  />
</template>

<script setup>
const submit = (form) => {
  console.log(form)
}
</script>

<style scoped></style>

自定义formData

也可以自定义formData，实现更多的功能。

custom.vue

<template>
  <p class="mb-4">支持双向绑定：{{ value }}</p>
  <dk-form :key="2" v-model="value" :form-data="formData" @submit="submit" />
</template>

<script setup>
import { reactive, ref } from 'vue'
const value = ref(null)

const submit = (form) => {
  console.log(form)
}

const formData = reactive({
  rules: [
    {
      type: 'dk-style-border-input',
      field: 'border',
      title: '边框',
      value: {},
    },
    {
      type: 'dk-style-box-input',
      field: 'box',
      title: '尺寸',
      value: {},
    },
    {
      type: 'dk-style-shadow-input',
      field: 'boxShadow',
      title: '卡片阴影',
      value: { boxShadow: '' },
    },
    {
      type: 'input',
      field: 'name',
      value: '测试12',
      title: '名称',
      effect: {
        help: '帮助信息',
      },
      props: {
        type: 'text',
        placeholder: '请输入名称',
      },
      validate: [
        {
          message: '请输入名称',
          required: true,
          type: 'string',
          trigger: 'change',
        },
      ],
    },
    {
      type: 'select',
      field: 'test',
      value: '1',
      title: '排序',
      effect: {
        help: '帮助信息',
      },
    },
    {
      type: 'input',
      field: 'sort',
      value: '1',
      title: '排序',
      props: {
        type: 'text',
        placeholder: '请输入排序',
      },
    },
    {
      type: 'DkFileListInput',
      field: 'files',
      value: [],
      title: '多文件',
      props: {
        type: 'text',
        placeholder: '请输入排序',
      },
    },
    {
      type: 'DkColorInput',
      field: 'color',
      value: '#ccc',
      title: '颜色选择',
      props: {
        showAlpha: true,
      },
    },
  ],
  title: '编辑',
  action: '/adminapi/index',
  method: 'post',
})
</script>

<style scoped></style>

使用弹窗

通过Ref触发弹窗，可以实现更多的功能。

dialog.vue

<template>
  <dk-form
    ref="formRef"
    :is-dialog="true"
    :form-url="{
      url: '/gs_gold/admin.question/form?cate_id=12',
      method: 'get',
    }"
    @submit="submit"
  />
  <el-button type="primary" @click="onClick()">显示弹窗</el-button>
</template>

<script setup>
import { ref } from 'vue'
const formRef = ref()
const onClick = () => {
  formRef.value.show()
}

const submit = (form) => {
  console.log(form)
}
</script>

<style scoped></style>

组件配置

Form Props

属性	说明	类型	默认值
formData	表单数据	Object	null
isSubmit	是否提交	Boolean	true
extraConfig	表单配置	Object	{}
path	表单路径	String	''
formUrl	获取formData表单接口	String 或 Object	''
isLoading	显示加载	Boolean	true
minHeight	默认高度	String 或 Number	'100px'
isDialog	是否为弹窗	Boolean	false
dialogWait	弹窗显示后获取 formData	Boolean	true
dialog	弹窗配置	Object	{}

formUrl

<template>
  <dk-form :form-url="formUrl" />
</template>

<script>
const formUrl = "/xxx/xxx/"

// or

const formUrl = {
    url: "/xxx/xxx/",
    method: "get",
}
</script>

Form Events

事件名	说明	参数
click	点击触发的事件	(event: MouseEvent) => void

Form Slots

插槽名	说明
default	自定义默认内容

类型定义

组件导出以下类型定义

import type { FormProps } from '@vipl520/dk-ui'

样式变量

组件提供了下列 CSS 变量，可用于自定义样式。

名称	默认值
--dk-form-background	-