# monose-component-vue-antd **Repository Path**: monoseven/monose-component-vue-antd ## Basic Information - **Project Name**: monose-component-vue-antd - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-03-05 - **Last Updated**: 2025-08-26 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README

Vue3 ElementPlus 二次封装组件库

# 快速开始 1. 安装 ```bash npm install monose-component-vue ``` 2. 引入样式 ```ts import 'monose-component-vue/dist/monose-component-vue.css'; ``` 3. 手动引入组件 ```vue ``` 3. 自动引入组件目前已支持使用 `unplugin-vue-components/vite` 自动引入组件 ```ts import { MonoseVueResolver } from 'monose-component-vue/provider'; import VueComponents from 'unplugin-vue-components/vite'; export default defineConfig({ plugins: [ VueComponents({ resolvers: [MonoseVueResolver], }), ], }); ``` # 组件 ## 目录 - [MTable](#mtable) - [MForm](#mform) - [MSearchForm](#msearchform) - [MFormCollection](#mformcollection) - [MSelectWithAll](#mselectwithall) - [MIcon](#micon) - [MIconPicker](#miconpicker) - [MPagination](#mpagination) - [MDialog](#mdialog) - [MDrawer](#mdrawer) - [MDivider](#mdivider) - [MDescriptions](#mdescriptions) - [MCard](#mcard) - [MCardBox](#mcardbox) ## MTable #### 属性 | 属性名 | 说明 | 类型 | 默认值 | | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | ------ | | column | 必填，表头的列表，数组每一项包含每一列的表头和这一列的配置 | [ITableColumn](#itablecolumn)[] | - | | action | 可选, 表格每一行末尾的操作列的按钮 | [ITableAction](#itableaction)[] | - | | menu | 可在表格组件右上角添加一些图标按钮，拓展功能 | [ITableMenu](#itablemenu)[] | - | | v-model:data | 表格组件绑定的数据 | Record\[] | - | | loading | 控制表格组件是否处于loading加载动画状态(分页区和菜单区不受影响) | boolean | false | | fitHeight | 开启后，表格可根据外层盒子自适应高度 | boolean | false | | showIndex | 开启后，左侧会添加序号列 | boolean | false | | showSelection | 开启后，左侧会添加多选框列 | boolean | false | | showFilter | 开启后，菜单区域会增加配置按钮，可调节列的展示和顺序 | boolean | false | | total | 可选，传入此参数后，表格下方会出现分页组件，同时用于配置数据的总条数 | number | - | | v-model:pageSize | 每页显示条目个数 | number | - | | v-model:currentPage | 当前页数 | number | - | | config | 所有 ElementPlus 中位于 `ElTable` 中的属性均可添加到此位置 | Partial\> | - | | columuConfig | 所有 ElementPlus 中位于 `ElTableColumn` 中的属性均可添加到此位置
会添加到所有的 column 标签上，例如：配置所有列内容居中时会很方便。 | Partial\> | - | | pageConfig | 所有 ElementPlus 中位于 `ElPagination` 中的属性均可添加到此位置 | Partial\ | - | #### 事件 | 名称 | 说明 | 类型 | 参数说明 | | ----------- | ------------------------------------------------------ | ----------------------------------- | ------------------------------------------------------------------------------------- | | menuClick | 配置了属性 menu 后，点击菜单栏按钮时触发的事件 | (method: string) => void | method: 点击菜单按钮的标识，在属性 menu - prop 中配置 | | actionClick | 配置了属性 action 后，点击了表格每行右侧操作按钮时触发 | (method: string, data: any) => void | method: 点击按钮的标识，在属性 action - prop 中配置
data: 点击的按钮所在行的数据 | | pageChange | 配置了属性 total 后，分页组件发生改变时都会触发 | (pageInfo: IPageInfo) => void | pageInfo: 分页相关信息，包含了当前页数、每页大小 | #### 插槽 | 插槽名 | 说明 | 类型 | | --------------- | ------------------------ | ----------- | | [prop] + Header | 自定义表头的内容 | {data: any} | | [prop] | 自定义列的内容 | {data: any} | | actionHeader | 自定义操作列表头的内容 | {data: any} | | empty | 当数据为空时自定义的内容 | - | 说明： [prop] 为属性 column - prop 配置的值 ## MForm #### 属性 | 属性名 | 说明 | 类型 | 默认值 | | ------------ | --------------------------------------------------------------------------------------------------------------------- | --------------------- | ------ | | list | 用于配置表单组件中的各个元素，例如输入框、选择框等表单控件 | [IForm](#iform)[] | - | | v-model:data | 表单中数据的绑定值，是一个对象，key 为属性 list 中配置的 prop，value 为数据值 | Record\ | - | | rules | 表单校验规则 | FormRules | - | | column | 用于控制表单在页面中分为几列 | number | 1 | | config | 所有 ElementPlus 中位于 `ElForm` 中的属性均可添加到此位置 | Partial\ | - | | isEdit | 控制表单组件的编辑和展示的两种状态，false时，直接展示绑定的值，且可通过属性 list - option - textRender 进行自定义显示 | boolean | true | | theme | 表单主题，不同的样式 | enum | - | #### 事件无自定义事件，可直接在标签添加 `ElForm` 上的事件 #### 插槽 | 插槽名 | 说明 | 类型 | | ------ | ------------------------ | ----------- | | [prop] | 自定义该 FormItem 的内容 | {data: any} | 说明： [prop] 为属性 list - prop 配置的值，且仅在 list - type 配置的值为 `slot` 时生效 ## MSearchForm #### 属性 | 属性名 | 说明 | 类型 | 默认值 | | ------------ | ------------------------------------------------------------------------------------- | --------------------------------- | ------ | | list | 用于配置表单组件中的各个元素，例如输入框、选择框等表单控件。 | [IForm](#iform)[] | - | | v-model:data | 表单中数据的绑定值，是一个对象，key 为属性 list 中配置的 prop，value 为数据值。 | Record\ | - | | rules | 表单校验规则。 | FormRules | - | | action | 用于控制组件右侧中的功能按钮。 | [ISearchAction](#isearchaction)[] | - | | config | 所有 ElementPlus 中位于 `ElForm` 中的属性均可添加到此位置 | Partial\ | - | | showSearch | 是否显示搜索按钮；true 时，点击按钮才会触发搜索操作；false 时，修改表单自动触发搜索。 | boolean | false | | showReset | 是否显示重置按钮。 | boolean | false | #### 事件 | 名称 | 说明 | 类型 | 参数说明 | | ----------- | ------------------------------------------------------ | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | | search | 搜索组件触发的搜索操作时的事件 | (data: any, prop?: string) => void | data: 搜索组件绑定的值，同属性中的data；
prop: 当前触发搜索操作的表单控件（仅属性 showSearch 为 false 时可用） | | actionClick | 点击了搜索组件右侧操作按钮（由属性 action 配置）时触发 | (method: string, params?: any[]) => void | method: 点击按钮的标识，在属性 action - prop 中配置
params: 其他参数，例如按钮为上传、下拉按钮时，所携带的参数 | #### 插槽 | 插槽名 | 说明 | 类型 | | ------ | ------------------------ | ----------- | | [prop] | 自定义该 FormItem 的内容 | {data: any} | 说明： [prop] 为属性 list - prop 配置的值，且仅在 list - type 配置的值为 `slot` 时生效 ## MFormCollection 可以像使用 MForm 组件那样使用单个表单控件 #### 属性 | 属性名 | 说明 | 类型 | 默认值 | | ------------ | ------------------------------------------------------ | --------------- | ------ | | item | 用于配置表单组件的元素，例如输入框、选择框等表单控件。 | [IForm](#iform) | - | | v-model:data | 表单中数据的绑定值 | any | - | #### 事件 | 名称 | 说明 | 类型 | 参数说明 | | -------------- | ------------------------------------------------------- | ---------- | -------- | | change | 发生变化时触发 | () => void | 无参数 | | changeDebounce | 发生变化时触发，且具有防抖功能，例如 input 时会比较有用 | () => void | 无参数 | ## MSelectWithAll 在多选框的左侧添加了全选的选择框，可用于由全选需求的表单（MForm、MSearchForm 已经支持，可配置 list 属性中的 type 为 'selectWithAll' 即可使用） #### 属性 | 属性名 | 说明 | 类型 | 默认值 | | ------------ | ------------------------ | ------------------------------- | ------ | | v-model:data | 多选框中数据的绑定值 | any[] | - | | selectOption | 用于配置选择框的选项列表 | [ISelectOption](#iselectoption) | - | #### 事件 | 名称 | 说明 | 类型 | 参数说明 | | ------ | -------------------- | -------------------- | ----------------------- | | change | 选择框状态变化时触发 | (value: any) => void | value: 已选择的数据的值 | ## MIcon 结合了 iconfont，使用时和 `@element-plus/icons-vue` 中的组件特性一致，即：也可以通过 `ElIcon` 标签包裹，用于修改图标的大小、颜色等 #### 属性 | 属性名 | 说明 | 类型 | 默认值 | | ------ | -------------------------------------- | ------ | ------ | | icon | 引入的 iconfont 中的 symbol 模式的标识 | string | - | ## MIconPicker 图标选择器，可像`ElInput`一样作为表单使用，支持展示 iconfont 的所有图标，并进行选择。 #### 属性 | 属性名 | 说明 | 类型 | 默认值 | | ------------ | ---------------------------------------------------------- | -------------------------------------------------------------------------- | ------ | | v-model:icon | 当前选择的图标的标识 | string | - | | iconList | 图标列表，可使用 iconfont 项目中 iconfont.json文件中的数据 | {css_prefix_text: string; glyphs: { font_class: string; icon_id: any }[];} | - | ## MPagination 无特殊功能，固定了分页组件的格式 #### 属性 | 属性名 | 说明 | 类型 | 默认值 | | ------------------- | --------------------------------------------------------------- | ------------------------- | ------ | | total | 用于配置数据的总条数 | number | - | | v-model:pageSize | 每页显示条目个数 | number | - | | v-model:currentPage | 当前页数 | number | - | | config | 所有 ElementPlus 中位于 `ElPagination` 中的属性均可添加到此位置 | Partial\ | - | #### 事件 | 名称 | 说明 | 类型 | 参数说明 | | ---------- | ----------------------------------------------- | ----------------------------- | ------------------------------------------------ | | pageChange | 配置了属性 total 后，分页组件发生改变时都会触发 | (pageInfo: IPageInfo) => void | pageInfo: 分页相关信息，包含了当前页数、每页大小 | ## MDialog 封装了带有取消、确定按钮的弹窗 #### 属性 | 属性名 | 说明 | 类型 | 默认值 | | -------------- | ----------------------------------------------------------- | --------------------- | ------ | | v-model:isShow | 控制弹窗的显示和隐藏 | boolean | - | | hideAction | 隐藏确定和取消按钮 | boolean | false | | config | 所有 ElementPlus 中位于 `ElDialog` 中的属性均可添加到此位置 | Partial\ | - | #### 事件 | 名称 | 说明 | 类型 | 参数说明 | | ------ | ------------------ | ---------- | -------- | | cancel | 点击取消按钮时触发 | () => void | - | | submit | 点击确定按钮时触发 | () => void | - | #### 插槽 | 插槽名 | 说明 | 类型 | | ------ | ------------------------------------------------------ | ---- | | header | 对话框标题的内容；会替换标题部分，但不会移除关闭按钮。 | - | | footer | Dialog 按钮操作区的内容 | - | 说明： [prop] 为属性 list - prop 配置的值，且仅在 list - type 配置的值为 `slot` 时生效 ## MDrawer 封装了带有取消、确定按钮的抽屉 #### 属性 | 属性名 | 说明 | 类型 | 默认值 | | -------------- | ----------------------------------------------------------- | --------------------- | ------ | | v-model:isShow | 控制抽屉的显示和隐藏 | boolean | - | | hideAction | 隐藏确定和取消按钮 | boolean | false | | config | 所有 ElementPlus 中位于 `ElDrawer` 中的属性均可添加到此位置 | Partial\ | - | #### 事件 | 名称 | 说明 | 类型 | 参数说明 | | ------ | ------------------ | ---------- | -------- | | cancel | 点击取消按钮时触发 | () => void | - | | submit | 点击确定按钮时触发 | () => void | - | #### 插槽 | 插槽名 | 说明 | 类型 | | ------ | ------------------------------------------------------ | ---- | | header | 对话框标题的内容；会替换标题部分，但不会移除关闭按钮。 | - | | footer | Drawer 按钮操作区的内容 | - | ## MDivider #### 属性 | 属性名 | 说明 | 类型 | 默认值 | | ------ | ------------------------------------------- | -------------- | ------ | | type | 分割线的方向 | 'row' \| 'col' | 'row' | | margin | 分割线的边距，值与 css 中的 margin 属性相同 | string | - | ## MDescriptions 配置式使用 `ElDescriptions` 组件 #### 属性 | 属性名 | 说明 | 类型 | 默认值 | | ------ | ----------------------------------------------------------------- | --------------------------------- | ------ | | list | 列表 | [IDescriptions](#idescriptions)[] | - | | data | 数据 | boolean | - | | column | 分多少列 | number | 3 | | config | 所有 ElementPlus 中位于 `ElDescriptions` 中的属性均可添加到此位置 | Record\ | - | #### 事件 | 名称 | 说明 | 类型 | 参数说明 | | ------ | ------------------ | ---------- | -------- | | data | 点击取消按钮时触发 | () => void | - | | submit | 点击确定按钮时触发 | () => void | - | #### 插槽 | 插槽名 | 说明 | 类型 | | ----------------- | ----------------- | ----------- | | [prop] + '-label' | 自定义label的内容 | {data: any} | | [prop] | 自定义value的内容 | {data: any} | 说明： [prop] 为属性 list - prop 配置的值 ## MCard 无特殊功能，封装了固定样式的卡片 #### 属性 | 属性名 | 说明 | 类型 | 默认值 | | ------ | --------------------------------------------------------- | ------------------- | ------ | | config | 所有 ElementPlus 中位于 `ElCard` 中的属性均可添加到此位置 | Partial\ | - | #### 插槽 | 插槽名 | 说明 | 类型 | | ------ | -------------------- | ---- | | header | 自定义卡片标题的内容 | - | ## MCardBox 用于放置 `MCard` 等其他元素的盒子，可自动在所有内部盒子之间添加10px的边距 #### 属性 | 属性名 | 说明 | 类型 | 默认值 | | --------- | -------------- | ----------------- | -------- | | direction | 盒子的排列方向 | 'row' \| 'column' | 'column' | # 数据结构 ## ITableColumn ```ts // 继承了 `TableColumnProps`，可以直接使用 ElTableColumn 上的所有属性 interface ITableColumn extends TableColumnProps { label: string; prop: string; hideColumu?: boolean; // 是否隐藏此列 childHead?: ITableColumn[]; // 可设置二级、三级、...、n级的表头 } ``` ## ITableAction ```ts interface ITableAction { label: string; // 操作按钮的文字 prop: string; // 操作按钮的标识，在 actionClick 事件中会用到 type?: '' | 'default' | 'text' | 'success' | 'warning' | 'info' | 'primary' | 'danger'; // 操作按钮的颜色 icon?: string | Component; // 操作按钮左侧图标，支持图标组件和 iconfont 字符串标识 option?: Partial & { customDisabled?: (row: any) => any }; // 按钮的其他 ElButton 属性，且可以自定义禁用的逻辑 } ``` ## ITableMenu ```ts interface ITableMenu { label: string; // 菜单按钮名称 prop: string; // 菜单按钮标识，在 menuClick 事件中会用到 icon: string | Component; // 菜单图标，支持图标组件和 iconfont 字符串标识 } ``` ## IForm ```ts interface IForm extends Partial { label: string; // 该 formItem 展示的 label prop: string; // 该 formItem 的标识符，与 Form 绑定的 data 中的键名一致，同时也是 type 为 'slot' 时的插槽名称 column?: number; // 控制该 formItem 要占据的空间，与 MForm 组件的 column 属性配合使用 type: // 该 formItem 的表单类型 | 'input' | 'select' | 'selectWithAll' | 'switch' | 'number' | 'cascader' | 'treeSelect' | 'datePicker' | 'timePicker' | 'timeSelect' | 'radioGroup' | 'rate' | 'slider' | 'checkbox' | 'checkboxGroup' | 'upload' | 'text' | 'slot'; selectOption?: { // 当 type 为 select、 radioGroup 或 checkboxGroup 时，可配置该属性 label?: string; // 自定义 label 的键名 value?: string; // 自定义 value 的键名 options: Array<{ label?: any; value?: any; disabled?: boolean } & Record>; // 选项的列表 }; option?: Record; // 此属性会根据 type 的值自动匹配相对应的组件属性； // 例如当 type 为 input 时，option 为所有可 ElInput 上添加的属性，详见 ElementPlus 文档； // 当 type 是 text 是， option 可配置 textRender 属性，用于自定义展示内容，textRender 属性值为一个方法，方法的参数为该项绑定的值； // 当 MForm 添加了属性 isEdit 为 false 时，无论 type 值是什么，均可以使用 textRender 自定义显示内容。 } ``` ## ISearchAction ```ts type ISearchAction = ISearchActionButton | ISearchActionDropdown | ISearchActionUpload; interface ISearchActionBase { label: string; prop: string; option?: Partial; } interface ISearchActionButton extends ISearchActionBase { type: 'button'; } interface ISearchActionUpload extends ISearchActionBase { type: 'upload'; uploadOption?: Partial; } interface ISearchActionDropdown extends ISearchActionBase { type: 'dropdown'; dropList: Array<{ prop: string; label: string; icon?: string | Component; disabled?: boolean; divided?: boolean; }>; } ``` ## IDescriptions ```ts interface IDescriptions { label: string; prop: string; span?: number; width?: string | number; minWidth?: string | number; align?: 'left' | 'center' | 'right'; labelAlign?: 'left' | 'center' | 'right'; className?: string; labelClassName?: string; } ``` ## ISelectOption ```ts interface ISelectOption { // 当 type 为 select 和 radioGroup 时，可配置该属性 label?: string; // 自定义 label 的键名 value?: string; // 自定义 value 的键名 options: Array<{ label?: any; value?: any; disabled?: boolean } & Record>; // 选项的列表 } ```