DrawerForm 抽屉表单组件

右侧滑出式表单配置面板，结合抽屉和表单功能的组件。

基础用法

<template>
  <button @click="showDrawer = true">打开配置面板</button>
  
  <x-drawer-form
    v-model="showDrawer"
    :title="'用户配置'"
    :size="'400px'"
    :fields="fields"
    :form-data="formData"
    :show-confirm="true"
    :show-cancel="true"
    @confirm="handleConfirm"
    @cancel="handleCancel"
    @close="handleClose"
    @field-change="handleFieldChange"
  />
</template>

<script setup>
import { ref } from 'vue'
import { DrawerForm } from '@xto/feedback'

const showDrawer = ref(false)

const fields = [
  {
    name: 'username',
    label: '用户名',
    type: 'input',
    required: true,
    placeholder: '请输入用户名'
  },
  {
    name: 'email',
    label: '邮箱',
    type: 'input',
    required: true,
    placeholder: '请输入邮箱',
    rules: [
      { type: 'email', message: '请输入有效的邮箱地址' }
    ]
  },
  {
    name: 'role',
    label: '角色',
    type: 'select',
    options: [
      { label: '管理员', value: 'admin' },
      { label: '普通用户', value: 'user' }
    ]
  },
  {
    name: 'enabled',
    label: '启用状态',
    type: 'switch'
  },
  {
    name: 'description',
    label: '描述',
    type: 'textarea',
    placeholder: '请输入描述'
  }
]

const formData = ref({
  username: '张三',
  email: 'zhangsan@example.com',
  role: 'user',
  enabled: true
})

const handleConfirm = (data) => {
  console.log('确认数据:', data)
}

const handleCancel = () => {
  console.log('取消操作')
}

const handleClose = () => {
  console.log('关闭抽屉')
}

const handleFieldChange = (name, value) => {
  console.log('字段变化:', name, value)
}
</script>

字段类型

支持多种表单字段类型。

<template>
  <x-drawer-form v-model="showDrawer" :fields="fields" />
</template>

<script setup>
const fields = [
  // 单行文本
  { name: 'inputField', label: '单行文本', type: 'input' },
  
  // 文本域
  { name: 'textareaField', label: '文本域', type: 'textarea' },
  
  // 数字输入
  { name: 'numberField', label: '数字', type: 'number' },
  
  // 下拉选择
  { name: 'selectField', label: '下拉选择', type: 'select', options: [...] },
  
  // 开关
  { name: 'switchField', label: '开关', type: 'switch' },
  
  // 日期
  { name: 'dateField', label: '日期', type: 'date' },
  
  // 文件
  { name: 'fileField', label: '文件', type: 'file' }
]
</script>

表单验证

<template>
  <x-drawer-form :fields="fields" @confirm="handleConfirm" />
</template>

<script setup>
const fields = [
  {
    name: 'username',
    label: '用户名',
    type: 'input',
    required: true  // 必填验证
  },
  {
    name: 'email',
    label: '邮箱',
    type: 'input',
    rules: [
      { type: 'email', message: '请输入有效的邮箱地址' },
      { type: 'minLength', min: 5, message: '邮箱长度不能小于5' }
    ]
  }
]
</script>

抽屉宽度

<template>
  <!-- 固定宽度 -->
  <x-drawer-form :size="'500px'" />
  
  <!-- 百分比宽度 -->
  <x-drawer-form :size="'30%'" />
  
  <!-- 数字宽度 -->
  <x-drawer-form :size="600" />
</template>

禁用状态

<template>
  <x-drawer-form :disabled="true" :fields="fields" />
</template>

关闭时销毁

<template>
  <x-drawer-form :destroy-on-close="true" />
</template>

API

Props

属性	说明	类型	默认值
modelValue	是否显示	boolean	false
title	抽屉标题	string	'配置'
size	抽屉宽度	string | number	'400px'
fields	表单字段	FormField[]	[]
formData	表单数据	Record<string, any>	{}
showConfirm	是否显示确认按钮	boolean	true
showCancel	是否显示取消按钮	boolean	true
confirmText	确认按钮文本	string	'确认'
cancelText	取消按钮文本	string	'取消'
disabled	是否禁用表单	boolean	false
destroyOnClose	是否在关闭时销毁内容	boolean	false

FormField

属性	说明	类型
name	字段名称	string
label	字段标签	string
type	字段类型	'input' | 'textarea' | 'select' | 'number' | 'switch' | 'date' | 'file'
required	是否必填	boolean
disabled	是否禁用	boolean
placeholder	占位文本	string
options	下拉选项	Array<{ label: string; value: any }>
rules	验证规则	Array<{ type: string; message: string }>

Events

事件名	说明
update:modelValue	显示状态变化时触发
confirm	确认时触发
cancel	取消时触发
close	关闭时触发
field-change	字段值变化时触发