rxthinkcmf-wiki/RXThinkCMF_ThinkPhp8_AntdVue/zh/frontend/form-components.md

9.10 数据录入组件

:::tip 概述 本节介绍前端项目中常用的数据录入组件，包括表单（BasicForm）、弹窗表单和上传组件的使用方法。 :::

Form 表单组件

<template>
  <BasicForm @register="registerForm" />
</template>

<script setup>
import { BasicForm, useForm } from '@/components/Form';

const [registerForm] = useForm({
  schemas: [
    {
      name: 'name',
      label: '名称',
      component: 'Input',
      rules: [{ required: true, message: '请输入名称', trigger: ['blur'] }],
    },
    {
      name: 'status',
      label: '状态',
      component: 'Select',
      componentProps: {
        options: [
          { label: '启用', value: 1 },
          { label: '禁用', value: 0 },
        ],
      },
    },
  ],
});
</script>

Modal 弹窗组件

<template>
  <basicModal @register="registerModal" @ok="handleSubmit">
    <template #default>
      <!-- 表单内容 -->
    </template>
  </basicModal>
</template>

<script setup>
import { basicModal, useModal } from '@/components/Modal';

const [registerModal, { openModal, closeModal }] = useModal();

// 打开弹窗
const handleAdd = () => {
  openModal();
};

// 提交
const handleSubmit = async () => {
  const values = await getFormValues();
  await exampleAdd(values);
  closeModal();
};
</script>

Upload 上传组件

<template>
  <UploadImg v-model:image-url="formData.avatar" name="example" :fileSize="20" />
</template>

<script setup>
import UploadImg from '@/components/Upload/Image.vue';
</script>

Editor 富文本编辑器

<template>
  <Editor ref="editorRef" :height="editorHeight" name="content" />
</template>

<script setup>
import { ref } from 'vue';
import Editor from '@/components/Editor/tinymce.vue';

const editorRef = ref();
const editorHeight = 400;

// 提交时读取编辑器内容（真实项目回填：editorRef.value.myValue = html）
const getContent = () => editorRef.value?.myValue;
</script>

Password 密码强度组件

<template>
  <Password :value="formData.password" :repeat="true" />
</template>

<script setup>
import { Password } from '@/components/Password';

// 组件内部维护输入值与强度校验，仅通过 value 单向传入初始值（无 v-model）
</script>

ChinaArea 行政区划组件

<template>
  <ChinaArea v-model="formData.city" />
</template>

<script setup>
import ChinaArea from '@/components/ChinaArea/index.vue';
</script>