快速开始

1. 安装

npm install monose-component-vue

2. 引入样式

import 'monose-component-vue/dist/style.css';

3. 手动引入组件

<template>
  <MSearchForm :list="searchList" v-model:data="searchData" />
</template>

<script setup lang="ts">
import { IForm, MSearchForm } from 'monose-component-vue';
import { ref } from 'vue';

const searchList: IForm[] = [
  {
    label: '输入框',
    prop: 'text',
    type: 'input',
    option: { style: { width: '170px' } },
  },
];
const searchData = ref({ text: '123456' });
</script>

3. 自动引入组件

目前已支持使用 unplugin-vue-components/vite 自动引入组件

import { MonoseVueResolver } from 'monose-component-vue/provider';
import VueComponents from 'unplugin-vue-components/vite';

export default defineConfig({
  plugins: [
    VueComponents({
      resolvers: [MonoseVueResolver],
    }),
  ],
});

组件

目录

• MTable
• MForm
• MSearchForm
• MFormCollection
• MSelectWithAll
• MIcon
• MIconPicker
• MPagination
• MDialog
• MDrawer
• MDivider
• MDescriptions
• MCard
• MCardBox

MTable

属性

| 属性名 | 说明 | 类型 | 默认值 | | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | ------ | | column | 必填，表头的列表，数组每一项包含每一列的表头和这一列的配置 | ITableColumn[] | - | | action | 可选, 表格每一行末尾的操作列的按钮 | ITableAction[] | - | | menu | 可在表格组件右上角添加一些图标按钮，拓展功能 | ITableMenu[] | - | | v-model:data | 表格组件绑定的数据 | Record<string, any>[] | - | | 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<TableProps<any>> | - | | columuConfig | 所有 ElementPlus 中位于 ElTableColumn 中的属性均可添加到此位置会添加到所有的 column 标签上，例如：配置所有列内容居中时会很方便。 | Partial<TableColumnCtx<any>> | - | | pageConfig | 所有 ElementPlus 中位于 ElPagination 中的属性均可添加到此位置 | Partial<PaginationProps> | - |

事件

| 名称 | 说明 | 类型 | 参数说明 | | ----------- | ------------------------------------------------------ | ----------------------------------- | ------------------------------------------------------------------------------------- | | 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[] | - | | v-model:data | 表单中数据的绑定值，是一个对象，key 为属性 list 中配置的 prop，value 为数据值 | Record<string, any> | - | | rules | 表单校验规则 | FormRules | - | | column | 用于控制表单在页面中分为几列 | number | 1 | | config | 所有 ElementPlus 中位于 ElForm 中的属性均可添加到此位置 | Partial<FormProp> | - | | isEdit | 控制表单组件的编辑和展示的两种状态，false时，直接展示绑定的值，且可通过属性 list - option - textRender 进行自定义显示 | boolean | true | | theme | 表单主题，不同的样式 | enum | - |

事件

无自定义事件，可直接在标签添加 ElForm 上的事件

插槽

| 插槽名 | 说明 | 类型 | | ------ | ------------------------ | ----------- | | [prop] | 自定义该 FormItem 的内容 | {data: any} |

说明： [prop] 为 属性 list - prop 配置的值，且仅在 list - type 配置的值为 slot 时生效

MSearchForm

属性

| 属性名 | 说明 | 类型 | 默认值 | | ------------ | ------------------------------------------------------------------------------------- | --------------------------------- | ------ | | list | 用于配置表单组件中的各个元素，例如输入框、选择框等表单控件。 | IForm[] | - | | v-model:data | 表单中数据的绑定值，是一个对象，key 为属性 list 中配置的 prop，value 为数据值。 | Record<string, any> | - | | rules | 表单校验规则。 | FormRules | - | | action | 用于控制组件右侧中的功能按钮。 | ISearchAction[] | - | | config | 所有 ElementPlus 中位于 ElForm 中的属性均可添加到此位置 | Partial<FormProp> | - | | 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 | - | | v-model:data | 表单中数据的绑定值 | any | - |

事件

| 名称 | 说明 | 类型 | 参数说明 | | -------------- | ------------------------------------------------------- | ---------- | -------- | | change | 发生变化时触发 | () => void | 无参数 | | changeDebounce | 发生变化时触发，且具有防抖功能，例如 input 时会比较有用 | () => void | 无参数 |

MSelectWithAll

在多选框的左侧添加了全选的选择框，可用于由全选需求的表单（MForm、MSearchForm 已经支持，可配置 list 属性中的 type 为 'selectWithAll' 即可使用）

属性

| 属性名 | 说明 | 类型 | 默认值 | | ------------ | ------------------------ | ------------------------------- | ------ | | v-model:data | 多选框中数据的绑定值 | any[] | - | | selectOption | 用于配置选择框的选项列表 | 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<PaginationProps> | - |

事件

| 名称 | 说明 | 类型 | 参数说明 | | ---------- | ----------------------------------------------- | ----------------------------- | ------------------------------------------------ | | pageChange | 配置了属性 total 后，分页组件发生改变时都会触发 | (pageInfo: IPageInfo) => void | pageInfo: 分页相关信息，包含了当前页数、每页大小 |

MDialog

封装了带有取消、确定按钮的弹窗

属性

| 属性名 | 说明 | 类型 | 默认值 | | -------------- | ----------------------------------------------------------- | --------------------- | ------ | | v-model:isShow | 控制弹窗的显示和隐藏 | boolean | - | | hideAction | 隐藏 确定和取消按钮 | boolean | false | | config | 所有 ElementPlus 中位于 ElDialog 中的属性均可添加到此位置 | Partial<DialogProps> | - |

事件

| 名称 | 说明 | 类型 | 参数说明 | | ------ | ------------------ | ---------- | -------- | | 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<DrawerProps> | - |

事件

| 名称 | 说明 | 类型 | 参数说明 | | ------ | ------------------ | ---------- | -------- | | cancel | 点击取消按钮时触发 | () => void | - | | submit | 点击确定按钮时触发 | () => void | - |

插槽

| 插槽名 | 说明 | 类型 | | ------ | ------------------------------------------------------ | ---- | | header | 对话框标题的内容；会替换标题部分，但不会移除关闭按钮。 | - | | footer | Drawer 按钮操作区的内容 | - |

MDivider

属性

| 属性名 | 说明 | 类型 | 默认值 | | ------ | ------------------------------------------- | -------------- | ------ | | type | 分割线的方向 | 'row' | 'col' | 'row' | | margin | 分割线的边距，值与 css 中的 margin 属性相同 | string | - |

MDescriptions

配置式使用 ElDescriptions 组件

属性

| 属性名 | 说明 | 类型 | 默认值 | | ------ | ----------------------------------------------------------------- | --------------------------------- | ------ | | list | 列表 | IDescriptions[] | - | | data | 数据 | boolean | - | | column | 分多少列 | number | 3 | | config | 所有 ElementPlus 中位于 ElDescriptions 中的属性均可添加到此位置 | Record<string, any> | - |

事件

| 名称 | 说明 | 类型 | 参数说明 | | ------ | ------------------ | ---------- | -------- | | data | 点击取消按钮时触发 | () => void | - | | submit | 点击确定按钮时触发 | () => void | - |

插槽

| 插槽名 | 说明 | 类型 | | ----------------- | ----------------- | ----------- | | [prop] + '-label' | 自定义label的内容 | {data: any} | | [prop] | 自定义value的内容 | {data: any} |

说明： [prop] 为 属性 list - prop 配置的值

MCard

无特殊功能，封装了固定样式的卡片

属性

| 属性名 | 说明 | 类型 | 默认值 | | ------ | --------------------------------------------------------- | ------------------- | ------ | | config | 所有 ElementPlus 中位于 ElCard 中的属性均可添加到此位置 | Partial<CardProps> | - |

插槽

| 插槽名 | 说明 | 类型 | | ------ | -------------------- | ---- | | header | 自定义卡片标题的内容 | - |

MCardBox

用于放置 MCard 等其他元素的盒子，可自动在所有内部盒子之间添加10px的边距

属性

| 属性名 | 说明 | 类型 | 默认值 | | --------- | -------------- | ----------------- | -------- | | direction | 盒子的排列方向 | 'row' | 'column' | 'column' |

数据结构

ITableColumn

// 继承了 `TableColumnProps`，可以直接使用 ElTableColumn 上的所有属性
interface ITableColumn extends TableColumnProps {
  label: string;
  prop: string;
  hideColumu?: boolean; // 是否隐藏此列
  childHead?: ITableColumn[]; // 可设置二级、三级、...、n级的表头
}

ITableAction

interface ITableAction {
  label: string; // 操作按钮的文字
  prop: string; // 操作按钮的标识，在 actionClick 事件中会用到
  type?: '' | 'default' | 'text' | 'success' | 'warning' | 'info' | 'primary' | 'danger'; // 操作按钮的颜色
  icon?: string | Component; // 操作按钮左侧图标，支持 图标组件 和 iconfont 字符串标识
  option?: Partial<ButtonProps> & { customDisabled?: (row: any) => any }; // 按钮的其他 ElButton 属性，且可以自定义禁用的逻辑
}

ITableMenu

interface ITableMenu {
  label: string; // 菜单按钮名称
  prop: string; // 菜单按钮标识，在 menuClick 事件中会用到
  icon: string | Component; // 菜单图标，支持 图标组件 和 iconfont 字符串标识
}

IForm

interface IForm extends Partial<FormItemProps> {
  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<string, any>>; // 选项的列表
  };
  option?: Record<string, any>; // 此属性会根据 type 的值自动匹配相对应的组件属性；
  // 例如当 type 为 input 时，option 为所有可 ElInput 上添加的属性，详见 ElementPlus 文档；
  // 当 type 是 text 是， option 可配置 textRender 属性，用于自定义展示内容，textRender 属性值为一个方法，方法的参数为该项绑定的值；
  // 当 MForm 添加了属性 isEdit 为 false 时，无论 type 值是什么，均可以使用 textRender 自定义显示内容。
}

ISearchAction

type ISearchAction = ISearchActionButton | ISearchActionDropdown | ISearchActionUpload;
interface ISearchActionBase {
  label: string;
  prop: string;
  option?: Partial<ButtonProps>;
}
interface ISearchActionButton extends ISearchActionBase {
  type: 'button';
}
interface ISearchActionUpload extends ISearchActionBase {
  type: 'upload';
  uploadOption?: Partial<UploadProps>;
}
interface ISearchActionDropdown extends ISearchActionBase {
  type: 'dropdown';
  dropList: Array<{
    prop: string;
    label: string;
    icon?: string | Component;
    disabled?: boolean;
    divided?: boolean;
  }>;
}

IDescriptions

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

interface ISelectOption {
  // 当 type 为 select 和 radioGroup 时，可配置该属性
  label?: string; // 自定义 label 的键名
  value?: string; // 自定义 value 的键名
  options: Array<{ label?: any; value?: any; disabled?: boolean } & Record<string, any>>; // 选项的列表
}