自用组件库

安装

``bash
npm install auto-vue-manual
`

使用

`js
import AutoVueManual from "auto-vue-manual";
import type { InstallOptions } from 'auto-vue-manual';
import 'auto-vue-manual/dist/index.css';

import request from "@/global/request";
import { Translate } from "@/languages/index";

const options: InstallOptions = {
request,
translate: Translate
}

const app = createApp(App);
app.use(AutoVueManual, options);
app.mount('#app');
`

目录

#### Table

ProTable/ProTableSummary
ProTableList

#### Modal

BasicDialog
BasicDrawer
FormDialog
TableDialog

#### Upload

UploadAvatar
UploadImage
UploadImages

Button

$3

- OpenButton 新建按钮
- RefreshButton 刷新按钮
- SearchButton 搜索按钮
- ResetButton 重置按钮

$3

| 属性名 | 类型 | 说明 | 默认值 |
| -------- | ------- | ------------ | ------------------------------------------------------------------ |
| type | string | 按钮类型 | 'primary'（Open/Search），'default'（Refresh），'warning'（Reset） |
| size | string | 按钮尺寸 | 'default' |
| showIcon | boolean | 是否显示图标 | true |
| circle | boolean | 是否圆形按钮 | true |
| plain | boolean | 是否朴素按钮 | false |
| disabled | boolean | 是否禁用 | false |
| loading | boolean | 是否加载中 | false |
| t | string | 按钮文本 | '' |

$3

- 用于新建操作，蓝色圆形加号图标。
- 事件：@open 点击触发

$3

- 用于刷新操作，圆形刷新图标。
- 事件：@refresh 点击触发
- 支持 loading 状态自定义

$3

- 用于搜索操作，蓝色圆形放大镜图标。
- 事件：@search 点击触发

$3

- 用于重置操作，橙色圆形刷新图标。
- 事件：@reset 点击触发

$3

`vue


`

Document

Table

$3

#### ColumnProps

| 属性名 | 类型 | 说明 | 默认值 |
| ---------------- | ----------------------------------------------------------------------------- | ------------------------------------------------------------------- | ------ |
| type | string | 列类型, index / selection/ radio/ expand/ sort/ icon/ tag/ copy | - |
| prop | string | 列数据字段名 | - |
| label | string | 列标题 | - |
| width | number | 列宽 | - |
| align | string | 列对齐方式 | center |
| isShow | boolean | 是否显示在表格当中 | true |
| search | { defaultValue } | 搜索项配置, defaultValue可以设置默认的init-param | - |
| headerRender | (scope: HeaderRenderScope) => VNode | 自定义表头内容渲染（tsx语法） | - |
| render | (scope: RenderScope) => VNode string | 自定义单元格内容渲染（tsx语法），Basic和list的scope略有不同，请注意 | - |
| props | { api?: string, activeValue?: any, inactiveValue?: any, refresh?: boolean } | type = switch 时，props 配置 (TODO 更新其他type) | - |

#### Props 参数说明

| 属性名 | 类型 | 说明 | 默认值 |
| ------------------- | ------------------------------- | --------------------------------------------------------------------- | ------ |
| columns | [ColumnProps[]](#columnprops) | 必填，列配置项 | - |
| data | any[] | 静态 table data 数据，若存在则不会使用 request url 返回的 data | - |
| url | string | 实际请求接口 | - |
| auto-search | boolean | 是否自动执行请求 api | true |
| request-error | (params: any) => void | 表格 api 请求错误监听 | - |
| data-callback | (data: any) => any | 返回数据的回调函数，可以对数据进行处理 | - |
| has-pagination | boolean | 是否需要分页组件 | true |
| init-param | any | 初始化请求参数 | {} |
| search-param | any | 搜索参数 | {} |
| border | boolean | 是否带有纵向边框 | true |
| row-key | string | 行数据的 Key，用来优化 Table 的渲染，当表格数据多选时，所指定的 id ） | id |
| size | string | 列表大小，default/small/large | small |
| page-size | number | 列表页大小 | 0 |
| row-h | number | 列表行高 | 0 |
| ext-h | number | 列表额外高度 | 0 |
| sum-url | string | 汇总接口url，仅 ProTableSummary 有效 | |
| sum-text | string | 汇总文本，仅 ProTableSummary 有效 | Total |
| sum-text-format | string | 汇总文本格式，仅 ProTableSummary 有效 | \* |

#### Event 事件说明

| 事件名 | 说明 | 参数 |
| ------------------ | ---------------------------------------- | --------------------------------- |
| @row-click | 行点击事件，已排除 status / operation 列 | (row: any, column: any) => void |
| @row-dblclick | 行双击事件，已排除 status / operation 列 | (row: any, column: any) => void |
| @switch-change | 开关切换事件 | (value, scope, column) => void |

#### Expose 暴露方法说明

| 方法名 | 说明 | 参数 |
| ----------------- | -------------------------------------- | --------------------------------------------- |
| @search | 搜索事件 | (searchParam?: Record) => void |
| @reset | 重置事件 | () => void |
| @getTableList | 获取表格数据，不更新搜索参数及分页参数 | () => void |

#### 示例代码

`vue


`

ProTableList

#### Props 参数说明

| 属性名 | 类型 | 说明 | 默认值 |
| ----------- | -------- | --------------------------------------------------------------------- | ------ |
| row-key | string | 行数据的 Key，用来优化 Table 的渲染，当表格数据多选时，所指定的 id ） | id |

其余同 ProTable

#### Event 事件说明

| 事件名 | 说明 | 参数 |
| ----------------- | --------------------------------------------------------------------------------- | ------------------------------------- |
| @row-click | 行点击事件，未排除 status / operation 列，需添加 e.stopPropagation() 阻止事件冒泡 | ({ row: any, column: any }) => void |
| @row-dblclick | 行双击事件，未排除 status / operation 列，需添加 e.stopPropagation() 阻止事件冒泡 | ({ row: any, column: any }) => void |

#### Expose 暴露方法说明

与 ProTable 相同。

#### 示例代码

`vue


`

Modal 弹窗/抽屉

$3

- 所有弹窗类组件（BasicDialog、FormDialog、TableDialog）均基于 BasicDialog 实现，props/事件/用法风格统一。
- 所有抽屉类组件均基于 BasicDrawer 实现。
- 支持 v-bind 透传 Element Plus Dialog/Drawer 的所有原生属性。

$3

| 属性名 | 类型 | 说明 | 默认值 |
| ----------------- | ------- | ----------------------- | ------ |
| visible | boolean | 是否显示 | false |
| showClose | boolean | 是否显示关闭按钮 | true |
| title | string | 标题 | Title |
| width | string | 宽度 | 520px |
| top | string | 顶部距离 | 15vh |
| dialogProps | object | 透传 Dialog/Drawer 属性 | {} |
| appendToBody | boolean | 是否插入 body | true |
| lockScroll | boolean | 是否锁定滚动 | true |
| closeOnClickModal | boolean | 点击遮罩关闭 | false |

$3

- 通用弹窗基类，支持所有通用 props 和事件。
- 事件：@update:visible、@closed、@submit

$3

- 通用抽屉基类，支持所有通用 props 和事件。
- 事件：@update:visible、@closed

$3

- 基于 BasicDialog 扩展，内置底部按钮，适合表单场景。
- 额外 props：executing（是否执行中）、footer（是否显示底部）、btnSize、okText、cancelText
- 事件：@submit、@closed、@before-close

$3

- 基于 BasicDialog 扩展，适合表格弹窗场景。
- 额外 props：requesting（是否请求中）

$3

`vue


`

$3

`vue


`

Upload

$3

#### Props 参数说明

| 属性名 | 类型 | 说明 | 默认值 |
| ------------ | --------- | ------------ | ------ |
| url | string | 上传地址 | - |
| avatar | string | 头像地址 | - |
| text | string | 上传提示 | - |
| path | string | 保存路径 | - |
| preview | boolean | 是否显示预览 | false |
| disabled | boolean | 是否禁用 | false |
| size | number | 大小（KB） | 5120 |

$3

#### Props 参数说明

| 属性名 | 类型 | 说明 | 默认值 |
| --------- | -------- | -------- | ------ |
| image | string | 图片地址 | - |

其余同 UploadAvatar

#### 示例代码

`vue


`

$3

#### Props 参数说明

| 属性名 | 类型 | 说明 | 默认值 |
| ---------- | ------------ | -------- | ------ |
| images | FileList[] | 图片地址 | - |
| limit | number | 限制数量 | 10 |

其余同 UploadAvatar

#### 示例代码

`vue


`

Tinymce 富文本编辑器

$3

基于 tinymce 封装的富文本编辑器，支持图片上传、字数统计、代码高亮等常用功能，适用于内容管理、文章编辑等场景。

$3

| 属性名 | 类型 | 说明 | 默认值 |
| -------- | ------- | --------------------- | ------------- |
| url | string | 图片上传接口 | /upload/image |
| content | string | 编辑器内容（v-model） | '' |
| height | number | 编辑器高度 | 600 |
| disabled | boolean | 是否禁用编辑 | false |

$3

| 事件名 | 说明 | 参数 |
| -------------- | -------------- | ------------- |
| update:content | 内容变更时触发 | value: string |

$3

- 支持图片粘贴/上传，自动调用 url 接口
- 支持字数统计、代码高亮、列表、字体样式等
- 支持自定义高度、禁用状态
- 默认中文界面

$3

`vue


``