114 lines
2.0 KiB
Markdown
114 lines
2.0 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: [
|
|
{
|
|
field: 'name',
|
|
label: '名称',
|
|
component: 'NInput', // 组件名对应 naive-ui 的 NInput
|
|
required: true,
|
|
},
|
|
{
|
|
field: 'status',
|
|
label: '状态',
|
|
component: 'NSelect',
|
|
componentProps: {
|
|
options: [
|
|
{ label: '启用', value: 1 },
|
|
{ label: '禁用', value: 0 },
|
|
],
|
|
},
|
|
},
|
|
],
|
|
});
|
|
</script>
|
|
```
|
|
|
|
## Modal 弹窗组件
|
|
|
|
```vue
|
|
<template>
|
|
<BasicModal @register="registerModal" @ok="handleSubmit" />
|
|
</template>
|
|
|
|
<script setup>
|
|
import { BasicModal, useModal } from '@/components/Modal';
|
|
|
|
const [registerModal, { openModal, closeModal }] = useModal();
|
|
|
|
// 打开弹窗
|
|
const handleAdd = () => {
|
|
openModal(true, { isUpdate: false });
|
|
};
|
|
|
|
// 提交
|
|
const handleSubmit = async () => {
|
|
const values = await getFormValues();
|
|
await exampleAdd(values);
|
|
closeModal();
|
|
};
|
|
</script>
|
|
```
|
|
|
|
## Upload 上传组件
|
|
|
|
```vue
|
|
<template>
|
|
<BasicUpload v-model="formData.avatar" :action="uploadUrl" />
|
|
</template>
|
|
|
|
<script setup>
|
|
import { BasicUpload } from '@/components/Upload';
|
|
const uploadUrl = '/api/upload/uploadFile';
|
|
</script>
|
|
```
|
|
|
|
## Editor 富文本编辑器
|
|
|
|
```vue
|
|
<template>
|
|
<Editor v-model="formData.content" />
|
|
</template>
|
|
|
|
<script setup>
|
|
import Editor from '@/components/Editor/index.vue';
|
|
</script>
|
|
```
|
|
|
|
## Password 密码强度组件
|
|
|
|
```vue
|
|
<template>
|
|
<Password v-model="formData.password" />
|
|
</template>
|
|
|
|
<script setup>
|
|
import { Password } from '@/components/Password';
|
|
</script>
|
|
```
|
|
|
|
## ChinaArea 行政区划组件
|
|
|
|
```vue
|
|
<template>
|
|
<ChinaArea v-model="formData.city" />
|
|
</template>
|
|
|
|
<script setup>
|
|
import ChinaArea from '@/components/ChinaArea/index.vue';
|
|
</script>
|
|
``` |