import{_ as i,o as a,c as t,a2 as h}from"./chunks/framework.B-QBKwc1.js";const o=JSON.parse('{"title":"前端组件速查","description":"以下组件定义在 ui/src/components/ 目录下，可在页面中直接引入使用。","frontmatter":{},"headers":[],"relativePath":"zh/appendix/components.md","filePath":"zh/appendix/components.md"}'),n={name:"zh/appendix/components.md"};function k(l,s,e,p,d,r){return a(),t("div",null,[...s[0]||(s[0]=[h(`

G. 前端组件速查 ​

概述

以下组件定义在 ui/src/components/ 目录下，可在页面中直接引入使用。

数据展示 ​

组件路径说明核心 Props
BasicTablecomponents/Table/数据表格columns、dataSource、pagination
PageWrappercomponents/Page/页面容器title、contentFullHeight
CountTocomponents/CountTo/数字动画startVal、endVal、duration
Qrcodecomponents/Qrcode/二维码value、size、level
Iconcomponents/icon/图标选择器value、disabled

数据录入 ​

组件路径说明核心 Props
BasicFormcomponents/Form/动态表单schemas、labelWidth
BasicModalcomponents/Modal/弹窗title、width、okText
BasicUploadcomponents/Upload/文件上传action、maxCount、accept
Editorcomponents/Editor/富文本编辑器value、height、placeholder
Passwordcomponents/Password/密码强度value、placeholder
ChinaAreacomponents/ChinaArea/省市区联动value、placeholder
Regioncomponents/Region/行政区划value、level
Croppercomponents/Cropper/头像裁剪image、aspectRatio
NumberInputcomponents/numberInput/数字输入value、min、max
PriceInputcomponents/priceInput/价格输入value、precision

Excel ​

组件路径说明
ImportExcelcomponents/Excel/Excel 导入（解析文件）
Export2Excelcomponents/Excel/Excel 导出（生成文件）

其他 ​

组件路径说明
Authoritycomponents/Authority/权限组件（根据权限显示/隐藏）
CheckTokencomponents/CheckToken/Token 校验组件
Lockscreencomponents/Lockscreen/锁屏组件
Websocketcomponents/Websocket/WebSocket 组件

使用示例 ​

BasicTable ​

vue
<template>
  <BasicTable
    :columns="columns"
    :request="loadDataTable"
    :row-key="(row) => row.id"
    ref="basicTableRef"
  />
</template>

<script setup>
import { BasicTable } from '@/components/Table';
import { getExamplePage } from '@/api/tool/example';

const columns = [
  { title: 'ID', key: 'id', width: 80 },
  { title: '名称', key: 'name' },
  { title: '状态', key: 'statusText', width: 100 },
];

const loadDataTable = async (params) => await getExamplePage({ ...params });
</script>

BasicForm ​

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

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

const [registerForm] = useForm({
  schemas: [
    { field: 'name', label: '名称', component: 'NInput', required: true },
    { field: 'status', label: '状态', component: 'NSelect', componentProps: { options: [...] } },
  ],
});
</script>

BasicModal ​

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 () => { /* ... */ closeModal(); };
</script>
`,17)])])}const c=i(n,[["render",k]]);export{o as __pageData,c as default};