126 lines
2.4 KiB
Markdown
126 lines
2.4 KiB
Markdown
# 9.10 数据录入组件
|
||
|
||
:::tip 概述
|
||
本节介绍前端项目中常用的数据录入组件，包括表单（BasicForm）、弹窗表单和上传组件的使用方法。
|
||
:::
|
||
|
||
## Form 表单组件
|
||
|
||
```vue
|
||
<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 弹窗组件
|
||
|
||
```vue
|
||
<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 上传组件
|
||
|
||
```vue
|
||
<template>
|
||
<UploadImg v-model:image-url="formData.avatar" name="example" :fileSize="20" />
|
||
</template>
|
||
|
||
<script setup>
|
||
import UploadImg from '@/components/Upload/Image.vue';
|
||
</script>
|
||
```
|
||
|
||
## Editor 富文本编辑器
|
||
|
||
```vue
|
||
<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 密码强度组件
|
||
|
||
```vue
|
||
<template>
|
||
<Password :value="formData.password" :repeat="true" />
|
||
</template>
|
||
|
||
<script setup>
|
||
import { Password } from '@/components/Password';
|
||
|
||
// 组件内部维护输入值与强度校验，仅通过 value 单向传入初始值（无 v-model）
|
||
</script>
|
||
```
|
||
|
||
## ChinaArea 行政区划组件
|
||
|
||
```vue
|
||
<template>
|
||
<ChinaArea v-model="formData.city" />
|
||
</template>
|
||
|
||
<script setup>
|
||
import ChinaArea from '@/components/ChinaArea/index.vue';
|
||
</script>
|
||
``` |