126 lines
3.7 KiB
Markdown
126 lines
3.7 KiB
Markdown
# G. 前端组件速查
|
|
|
|
:::tip 概述
|
|
以下组件定义在 `ui/src/components/` 目录下，可在页面中直接引入使用。
|
|
:::
|
|
|
|
## 数据展示
|
|
|
|
| 组件 | 路径 | 说明 | 核心 Props |
|
|
|------|------|------|-----------|
|
|
| BasicTable | `components/Table/` | 数据表格 | `columns`、`dataSource`、`pagination` |
|
|
| PageWrapper | `components/Page/` | 页面容器 | `title`、`contentFullHeight` |
|
|
| CountTo | `components/CountTo/` | 数字动画 | `startVal`、`endVal`、`duration` |
|
|
| Qrcode | `components/Qrcode/` | 二维码 | `value`、`size`、`level` |
|
|
| Icon | `components/icon/` | 图标选择器 | `value`、`disabled` |
|
|
|
|
## 数据录入
|
|
|
|
| 组件 | 路径 | 说明 | 核心 Props |
|
|
|------|------|------|-----------|
|
|
| BasicForm | `components/Form/` | 动态表单 | `schemas`、`labelWidth` |
|
|
| BasicModal | `components/Modal/` | 弹窗 | `title`、`width`、`okText` |
|
|
| BasicUpload | `components/Upload/` | 文件上传 | `action`、`maxCount`、`accept` |
|
|
| Editor | `components/Editor/` | 富文本编辑器 | `value`、`height`、`placeholder` |
|
|
| Password | `components/Password/` | 密码强度 | `value`、`placeholder` |
|
|
| ChinaArea | `components/ChinaArea/` | 省市区联动 | `value`、`placeholder` |
|
|
| Region | `components/Region/` | 行政区划 | `value`、`level` |
|
|
| Cropper | `components/Cropper/` | 头像裁剪 | `image`、`aspectRatio` |
|
|
| NumberInput | `components/numberInput/` | 数字输入 | `value`、`min`、`max` |
|
|
|
|
## Excel
|
|
|
|
| 组件 | 路径 | 说明 |
|
|
|------|------|------|
|
|
| ImportExcel | `components/Excel/` | Excel 导入（解析文件） |
|
|
| Export2Excel | `components/Excel/` | Excel 导出（生成文件） |
|
|
|
|
## 其他
|
|
|
|
| 组件 | 路径 | 说明 |
|
|
|------|------|------|
|
|
| Authority | `components/Authority/` | 权限组件（根据权限显示/隐藏） |
|
|
| Lockscreen | `components/Lockscreen/` | 锁屏组件 |
|
|
| Websocket | `components/Websocket/` | WebSocket 组件 |
|
|
|
|
## 使用示例
|
|
|
|
### BasicTable
|
|
|
|
```vue
|
|
<template>
|
|
<BasicTable
|
|
:columns="columns"
|
|
:request="loadDataTable"
|
|
:row-key="(row) => row.id"
|
|
ref="tableRef"
|
|
>
|
|
<template #bodyCell="{ column, record }">
|
|
<template v-if="column.key === 'action'">
|
|
<a-button type="link" @click="handleEdit(record)">编辑</a-button>
|
|
</template>
|
|
</template>
|
|
</BasicTable>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
import { getExamplePage } from '@/api/tool/example';
|
|
|
|
const tableRef = ref();
|
|
const columns = [
|
|
{ title: 'ID', dataIndex: 'id', width: 80 },
|
|
{ title: '名称', dataIndex: 'name' },
|
|
{ title: '状态', dataIndex: 'statusText', width: 100 },
|
|
{ title: '操作', dataIndex: 'action', key: 'action', width: 180 },
|
|
];
|
|
|
|
const loadDataTable = async (params) => await getExamplePage(params);
|
|
const handleEdit = (record) => {};
|
|
</script>
|
|
```
|
|
|
|
### BasicForm
|
|
|
|
```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: [...] } },
|
|
],
|
|
});
|
|
</script>
|
|
```
|
|
|
|
### BasicModal
|
|
|
|
```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 () => { /* ... */ closeModal(); };
|
|
</script>
|
|
``` |