monose-component-vue

Vue3 ElementPlus 二次封装组件库

快速开始

1. 安装

npm install monose-component-vue

2. 引入样式

import 'monose-component-vue/dist/monose-component-vue.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

属性

事件

插槽

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

MForm

属性

事件

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

插槽

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

MSearchForm

属性

事件

插槽

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

MFormCollection

可以像使用 MForm 组件那样使用单个表单控件

属性

事件

MSelectWithAll

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

属性

事件

MIcon

结合了 iconfont，使用时和 @element-plus/icons-vue 中的组件特性一致，即：也可以通过 ElIcon 标签包裹，用于修改图标的大小、颜色等

属性

MIconPicker

图标选择器，可像ElInput一样作为表单使用，支持展示 iconfont 的所有图标，并进行选择。

属性

MPagination

无特殊功能，固定了分页组件的格式

属性

事件

MDialog

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

属性

事件

插槽

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

MDrawer

封装了带有取消、确定按钮的抽屉

属性

事件

插槽

MDivider

属性

MDescriptions

配置式使用 ElDescriptions 组件

属性

事件

插槽

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

MCard

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

属性

插槽

MCardBox

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

属性

数据结构

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>>; // 选项的列表
}