jz-element-plus

注意：主体的开发已经结束，目前在测试阶段，大部分的属性，插槽，事件，不会大更改，请谨慎使用

Note: The main development has been completed, and it is currently in the testing stage. Most of the attributes, slots, events, will not be changed significantly, please use with caution

1. 基于 element-plus，从个人喜好角度出发，用配置文件驱动的组件

base on element-plus, from personal preferences, use configuration file driven components

2. 还在更新中，已经完成的组件： jz-button, jz-table, jz-table-vr, jz-select, jz-card, jz-div, jz-dialog, jz-divider, jz-input-number, jz-input-number-range, jz-text, jz-date-picker, jz-checkbox-group, jz-radio-group, jz-title, jz-input, jz-svg-icon, JzFullLoading(命令式组件), JzMessageDialog(命令式组件), jz-form, jz-rich-text

its still updating

3. 组件已经基本结束，后续会把类型文件，添加完全

I will be updated in the corresponding documentation below

4. 如果你有好的建议和想法，或者使用上有问题可以联系我vx：putongren312

if you have good suggestions and ideas, or if you have problems using it, please contact me vx: putongren312

安装

# 先安装 element-plus
pnpm add element-plus

# 再安装 jz-element-plus
pnpm add jz-element-plus

样式

为了方便使用者自定义组件样式，或者主题

本组件不内置 element-plus 的样式，需要自行引入

import "element-plus/dist/index.css";

or

参照 elemtnt-plus 建议的其他用法

使用

全量导入

main.ts

import { createApp } from "vue"; 
import App from "./App.vue"; 
import "element-plus/dist/index.css"; 

// 全局引入样式
import "jz-element-plus/dist/jz-element-plus.css"; 
import JzElementPlus from "jz-element-plus";

const APP = createApp(App);
APP.use(JzElementPlus);
APP.mount("#app");

按需导入

<template>
  <jz-button type="primary">按钮</jz-button>
</template>

<script setup lang="ts">
import { JzButton } from 'jz-element-plus'

自动导入 (推荐)

vite.config.ts

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
// 引入 jz-element-plus 的解析器
import { JzElementPlusResolver } from "jz-element-plus/resolvers";

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [JzElementPlusResolver()],
    }),
    Components({
      resolvers: [JzElementPlusResolver()],
    }),
  ],
});

组件说明

JzButton

完全兼容 el-button 的属性，详情点击查看

拓展内容

属性

| 属性名 | 类型 | 说明 | 默认值 | | :----------- | :------ | :------------------------- | :----- | | width | string | 宽度 | - | | margin | string | 外边距 | - | | debounce | boolean | 开启防抖 | false | | debounceTime | number | 防抖的间隔时间， ms | 300 | | throttle | boolean | 开启节流 | false | | throttleTime | number | 节流的间隔时间，ms | 300 | | immediate | boolean | 防抖和节流是否立即触发一次 | false |

JzTable

项目中通用的表格组件

完全兼容 el-table 的属性,事件,方法,插槽 点击查看详情

拓展内容

属性

| 属性名 | 类型 | 说明 | 默认值 | | :----------------------- | :----------------------- | :------------------------------------------------------------ | :------- | | data | array | table绑定的值 | - | | columns | array | 列的配置文件 | - | | enableSelection | boolean | 是否开启选择栏 | false | | selectionType | multiple | single | multiple：多选；single：单选 | multiple | | selectionFixed | boolean | 选择栏是否固定，默认固定 | true | | enableIndex | boolean | 开启序号列，序号会自动计算 | false | | indexFixed | boolean | 序号列是否固定，默认固定 | true | | name | string | 表格的名字,用于编辑列的存储的命名空，enableColumnConfig为true的时候，必传 | - | | enableColumnConfig | boolean | 开启列配置功能，默认关闭，可以配置该列是否显示，排序 | false | | debounce | boolean | 开启防抖，阻止反复切换分页 | false | | debounceTime | number | 防抖时间 | 300 | | summaryList | string[] | 表格合计的列的列表,例如：[prop1, prop2, ...] | [] | | summaryValueObj | object | 表格合计的列的对象的列表,例如：{prop1:1000, prop2: 2000, ... } | [] | | summaryMergeList | {startIndex, mergeNum}[] | 统计行合并配置：startIndex:开始得下标，mergeNum:合并的行数 | [] | | showPagination | boolean | 开启分页器，默认开启 | true | | v-model:pageNum | number | 当前的页数 | 1 | | v-model:pageSize | number | 每页的个数 | 10 | | total | number | 总条数 | 0 | | isHiddenSelectAllCheckbox | boolean | 是否隐藏全选的checkbox | false | | isSelectedAll | boolean | 是否默认全选所有数据 | false | | v-model:selectedData | Array | 选择的数据 | [] | | v-model:selectedKeys | Array | 选择的数据的key列表，由rowKey决定 | [] |

事件 emits

| 事件名 | 类型 | 说明 | 形参 | | :--------------- | :------------------------------ | :----------------------- | :-------------------------------------------- | | page-change | (currentPage, pageSize) => viod | 分页器数据变动的时候触发 | currentPage:当前页数, pageSize:每页的个数 | | ~~selection-change~~ | ~~(rows, row) => viod~~ | ~~选择的内容变动的时候触发~~ | ~~rows：所有选中的数据列表，row：当前点击的数据~~ |

事件 expose

| 事件名 | 类型 | 说明 | 形参 | | :-------------- | :------------ | :----------------- | :--- | | vaildate | () => promise | 校验表格里面的表单 | | | resetFields | () => boolean | 重置表格里面的表单 | | | toggleSelection | () => viod | 选中传进来的行数据 | | | selectedAllData | (status:boolean) => viod | 将查到的所有数据，true:选中；false：取消选中 | | | selectedCurrentData | (status:boolean) => viod | 将查到的当前页数据，true：选中；false：取消选中 | |

columns 配置项

| 属性名 | 类型 | 说明 | 默认值 | | :------------------ | :----------------------------------------------- | :--------------------------- | :------ | | type | operation | 列的类型，在操作列配置，其余的值已经内置在组件内部处理| operation | | label | string | 列名 | - | | prop | string | 字段名称 对应列内容的字段名 | - | | required | boolean | 是否显示*号 | false | | rules | [{vaildator:(rule, value, callback) => viod}] | 自定义校验规则 | - | | headerAlign | center / right / left | 表头对齐方式 | center | | align | center / right / left | 内容对齐方式 | center | | width | string / number | 列的固定宽度 | - | | minWidth | string / number | 列的最小宽度 | - | | canHidden | boolean | 列是否可以被隐藏，默认可以 | true | | showOverflowTooltip | boolean | 是否显示内容溢出时的 tooltip | true | | fixed | boolean / string | 列是否固定在左侧或者右侧 | false | | slotName | string | 插槽的名字 | - |

JzTableVr

完全兼容 el-table-v2 的属性,事件,方法,插槽 点击查看详情

项目中通用的虚拟滚动的表格组件

拓展内容

属性

| 属性名 | 类型 | 说明 | 默认值 | | :--------------- | :----------------------- | :------------------------------------------------------------- | :----- | | width | string | 宽度，默认100% | - | | height | string | 高度，必传 | - | | data | array | table绑定的值 | - | | columns | array | 列的配置文件 | - | | enableIndex | boolean | 开启序号列，默认关闭 | false | | summaryList | string[] | 表格合计的列的列表,例如：[prop1, prop2, ...] | [] | | summaryValueObj | object | 表格合计的列的对象的列表,例如：{prop1:1000, prop2: 2000, ... } | [] | | summaryMergeList | {startIndex, mergeNum}[] | 统计行合并配置：startIndex:开始得下标，mergeNum:合并的行数 | [] |

columns

| 属性名 | 类型 | 说明 | 默认值 | | :----- | :----------------------------------------------- | :-------------------------- | :------ | | label | string | 列名 | - | | prop | string | 字段名称 对应列内容的字段名 | - | | width | string / number | 列的固定宽度 | - | | fixed | boolean / string | 列是否固定在左侧或者右侧 | false |

JzSelect

完全兼容 el-select 的属性、事件、插槽 点击查看详情

拓展内容

属性

| 参数 | 类型 | 默认值 | 说明 | | ------------- | --------- | ---------------- | ------------------------------------------------------------- | | getOptions | () => Promise<any[]> | any[] | undefined | 请求配置数据的方法址 | | options | {label:string, value:string}[] | - | 配置的数据 | | labelText | string | label | label对应的字段的名字 | | valueText | string | value | value对应的字段的名字 | | extraOptions | {label:string, value:string}[] | undefined | 额外的配置数据 | | extraPoisition | 'statr' | 'end' | start | 额外数据存放的位置 | | getTime | 'mounted'| 'focus' | 'mounted' | 请求数据方法触发的时机 | | cacheKey | string | - | 数据缓存的key | | handleOptions | (list) => viod | undefined | 额外处理options的函数 |

JzCard

简介

使用 el-card 和 el-collapse 组合实现卡片组件

完全兼容 el-card 和 el-collapse 的属性，详情点击查看

拓展内容

属性

| 属性名 | 类型 | 说明 | 默认值 | | :------------ | :---------------- | :----------------------- | :----- | | showTitle | boolean | 是否展示标题栏，默认不展示 | false | | title | string | 标题 | 标题 | | shadow | alway/hover/never | 阴影的样式 | never | | defaultActive | boolean | 默认是否展开 | true |

插槽

| 插槽名 | 说明 | 属性 | | :-------- | :-----------------------------------------------------| -------- | | title | 标题插槽，完全替换现有的标题内容，并且可以指定折叠按钮 | onActive, isAcive | | operation | 标题折叠按钮额外操作按钮的插槽 | - |

JzDiv

项目中通用的盒子组件，自带flex布局

自主拓展的组件

拓展内容

属性

| 属性名 | 类型 | 说明 | 默认值 | | :----------------------- | :----------------------- | :------------------------------------------------------------ | :------- | | flexDirection | 与原生一致 | 布局方向，默认横向 | row | | alignItems | 与原生一致 | 主轴对齐方式，默认居中 | center | | justifyContent | 与原生一致 | 分散模式，默认在开头 | flex-start | | flexWrap | 与原生一致 | 是否换行，默认不换行 | nowrap | | width | string | 宽度，默认撑满 | - | | height | string | 高度，默认跟随元素 | - | | padding | string | 内边距，默认0px | 0px | | margin | string | 外边距，默认0px | 0px | | backgroundColor | string | 背景色 | - | | borderRadius | string | 圆角值，默认0px | 0px |

JzDialog

简介

完全兼容 el-dialog 的属性，详情点击查看

拓展内容

属性

| 属性名 | 类型 | 说明 | 默认值 | | :----------- | :------ | :------------------------- | :----- | | debounce | boolean | 开启防抖 | false | | debounceTime | number | 防抖的间隔时间， ms | 300 | | throttle | boolean | 开启节流 | false | | throttleTime | number | 节流的间隔时间，ms | 300 | | immediate | boolean | 防抖和节流是否立即触发一次 | false |

JzDivider

简介

自主拓展的组件，与el-divider功能相似，但是实现不一样

拓展内容

属性

| 属性名 | 类型 | 说明 | 默认值 | | :----------- | :--------------------- | :--------------------------------------------------------- | :--------- | | direction | horizontal | vertical | 方向 | horizontal | | width | string | 当横向时，默认100%，纵向时，默认为1px，可以手动设置宽度 | 100% | 1px | | height | string | 当横向时，默认1px，纵向时，默认为100%，可以手动设置高度 | 1px | 100% | | marginY | string | 横向时生效，上下边距 | 15px | | marginX | string | 纵向时生效，左右边距 | 15px | | padding | string | 内边距 | 0 0 0 0 | | color | string | 颜色 | #dcdfe6 |

JzInputNumber

完全兼容 el-input-number 的属性,事件,方法,插槽 点击查看详情

拓展功能

属性

| 属性名 | 类型 | 说明 | 默认值 | | :----------- | :------------- | :--------------------- | :----- | | modelValue | number/string | 绑定的值 | - | | valueType | number/ string | 绑定值的数据类型,number：数字，默认值为null；string：字符串，默认值为'' | number | | width | string | 宽度 | - | | padding | string | 内边距 | - | | margin | string | 外边距 | - | | enableFormat | boolean | 是否开启数字的格式化 | true | | formatPrefix | string | 格式化的前缀字符 | - |

JzInputNumberRange

本组件是基于 el-input-number 的封装。

用于实现数值范围的功能。

拓展内容

注意

1. 与jz-form 配合时，绑定 modelValue 时，才会触发表单验证，否则不会触发验证；
2. 传递 modelValue时，或者同时传递startValue 和 endValue 组件才会工作；
3. 默认值 modelValue 的优先级大于 startValue 和 endValue；

属性

| 参数 | 类型 | 默认值 | 说明 | | ------------------ | -------------- | -------------------------------------- | ------------ | | modelValue | array/string | array | 双向绑定的值，由modelType决定，为字符串时，会以','拼接 | | modelType | string<'array' | 'string'> | 'array' | 决定整体值的类型，数组或者是字符串 | | valueType | string<'number' | 'string'> | 'number' | 左侧或者右侧值得类型，数字或者是字符串 | | v-model:startValue | number/string | undefined，空值：number:null;string:"" | 左侧绑定的值 | | v-model:endValue | number/string | undefined，空值：number:null;string:"" | 右侧绑定的值 |

JzText

本组件是基于 el-text 的封装，点击查看详情。

拓展内容

属性

| 参数 | 类型 | 默认值 | 说明 | | ------------------ | --------------------- | ----------------------- | ------------ | | v-model:modelValue | any | - | 双向绑定的值 |

插槽 slot

| 名称 | 说明 | | ------------------ | ------------ | | default | 默认内容，与modelValue互斥，只能生效一个 |

JzDatePicker

完全兼容 el-date-picker 的属性,事件,方法,插槽 点击查看详情

拓展内容

属性

| 参数 | 类型 | 默认值 | 说明 | | ------------------ | ---------------------------- | ------------ | ----------------------------------------------- | | modelValue | string | array | - | 绑定的值，跟着type的值，传递 | | modelType | string<'array' | 'string'> | 绑定值的类型 | array:返回数组；sting:返回字符串，用','拼接 | | v-model:startValue | string | undefined | range类型，左侧绑定的值 | | v-model:endValue | string | undefined | range类型，右侧绑定的值 | | rangeDays | number | undefined | 区间可选的天数，大于0 |

JzCheckboxGroup

完全兼容 el-checkbox 的属性、事件、插槽 点击查看详情

拓展内容

属性

| 参数 | 类型 | 默认值 | 说明 | | ---------------| ---------------------------------- | ---------------- | ------------------------------------------------------------- | | modelValue | Array<string | number> | string | [] | 绑定的值 | | modelType | string<'array' | 'number'> | 'array' | 绑定值的类型，默认返回数组，也可以指定返回字符串 | | getOptions | () => permise<any[]> | any[] | undefined | 请求options的方法，可以是接口返回，也可以直接返回简单的值 | | options | Array<any[]> | undefined | options的配置数据 | | extraOptions | {label:string, value:string}[] | undefined | 额外的配置数据 | | extraPoisition | 'statr' | 'end' | 'start' | 额外数据存放的位置 | | labelText | string | '' | 当你的label字段不是label的时候，用该字段指定字段名称 | | valueText | string | '' | 当你的value字段不等于'value'时，用该字段指定字段名称 | | cacheKey | string | - | 是否开启缓存，用该字段指定缓存的key，相同的key，将复用数据 |

JzRadioGroup

完全兼容 el-radio 的属性、事件、插槽 点击查看详情

默认就是el-radio-group用法。

拓展内容

属性

| 参数 | 类型 | 默认值 | 说明 | | ---------------| ---------------------------------- | ---------------- | ------------------------------------------------------------- | | modelValue | string | number | string | - | 绑定的值 | | getOptions | () => permise<any[]> | any[] | undefined | 请求options的方法，可以是接口返回，也可以直接返回简单的值 | | options | Array<any[]> | undefined | options的配置数据 | | extraOptions | {label:string, value:string}[] | undefined | 额外的配置数据 | | extraPoisition | 'statr' | 'end' | 'start' | 额外数据存放的位置 | | labelText | string | '' | 当你的label字段不是label的时候，用该字段指定字段名称 | | valueText | string | '' | 当你的value字段不等于'value'时，用该字段指定字段名称 | | cacheKey | string | - | 是否开启缓存，用该字段指定缓存的key，相同的key，将复用数据 |

JzTitle

自主拓展的组件，用于展示标题，支持自定义样式。

属性

| 属性名 | 类型 | 默认值 | 说明 | | :--- | :--- | :--- | :--- | | type | 'default' | 'primary' | 'warning' | 'danger' | - | 标题类型 | | color | string | - | 自定义颜色 | | fontSize | string | 16px | 标题大小 | | fontWeight | string | 600 | 标题粗细 | | showIcon | boolean | false | 是否展示图标 | | iconType | 'default' | 'primary' | 'warning' | 'danger' | - | 图标的类型 | | iconColor | strin | - | 图标自定义颜色 | | iconWidth | strin | - | 图标宽度 | | iconHeight | strin | - | 图标高度 | | iconBorderReadius | strin | 0px | 图标圆角 | | iconMargin | strin | 0px 15px 0px 0px | 图标外边距 |

JzInput

通用的输入组件

完全兼容 el-input 的属性,事件,方法,插槽 点击查看详情

拓展内容

属性

| 参数 | 类型 | 默认值 | 说明 | | ----------- | ------------------ | -------- | ------------------------- | | width | string | 100% | 宽度 | | margin | string | - | 外边距 | | padding | string | - | 内边距 | | textAlign | string | left | 内容对齐方式 |

JzFullLoading

命令式全屏加载组件

拓展内容

属性

| 参数 | 类型 | 默认值 | 说明 | | ----------- | ------------------ | -------- | ------------------------- | | text | string | 加载中…… | loading的提示文字 |

方法

| 参数 | 类型 | 默认值 | 说明 | | ----------- | ------------------ | -------- | ------------------------- | | show | () => viod | - | 展示loading | | close | () => viod | - | 关闭loading | | reset | () => viod | - | 重置loading |

内部维护了一个计数器，如果有多个接口同时请求，可以多次调用show方法，延长loading时间，调用close方法时，减少计数，当计数为0时，关闭loading 如果计数器混乱了，可以调用reset方法重置计数器

示例

JzFullLoading.show({text:"加载中……"})
JzMessageDialog.close()
JzMessageDialog.reset()

JzSvgIcon

通用的展示SVG图标组件

拓展内容

属性

| 参数 | 类型 | 默认值 | 说明 | | ----------- | ------------------ | -------- | ------------------------- | | type | 'default' | 'success' | 'warning' | 'danger' | 'default' | 类型 | | src | Object | - | svg对象 | | fontSize | string | - | 图标大小 | | color | string | - | 图标颜色 |

JzMessageDialog

通用的消息弹窗组件，命令式组件

属性

| 属性名 | 类型 | 默认值 | 说明 | | :--- | :--- | :--- | :--- | | title | String | '标题' | 弹窗标题 | | content | String | - | 弹窗内容，支持代码格式 |

示例

JzMessageDialog.success({content: '成功提示'})
JzMessageDialog.warning({content: '警告提示'})
JzMessageDialog.error({content: '错误提示'})

JzForm

兼容 el-form 的属性，点击查看详情

拓展内容

属性

| 属性 | 类型 | 默认值 | 说明 | | ---------------| ------------------------------| ------- | ------------------------------------------------------------------------------- | | v-model | object | {} | 绑定的值 | | itemOptions | itemOption[] | [] | 表单配置集合，详情见下表 | | defaultNum | number | - | 默认展示个数 | | isShowAll | boolean | false | defaultNum配置之后才会生效 | | tips | string | '' | 底部红色提示 | | showActions | boolean | true | 是否展示操作按钮 | | submitText | string | 查询 | 查询按钮文字 | | resetText | string | 重置 | 重置按钮文字 | | sm | number | 12 | sm尺寸展示的宽度 | | md | number | 8 | md尺寸展示的宽度 | | xl | number | 6 | xl尺寸展示的宽度 | | resetText | string | 重置 | 重置按钮文字 | | exclusiveList | {prop:string,label:string}[] | [] | 不能同时为空列表，结构如下[{prop1:'', label1:''}, {prop2:'', label2:''}, ...] | | hiddenList | string[] | [] | 表单隐藏的字段列表，例如：[prop1, prop2, ...] | | debounce | boolean | false | 确定按钮开启防抖 | | debounceTime | number | 300 | 确定按钮防抖时间，ms | | throttle | boolean | false | 确定按钮开启节流 | | throttleTime | boolean | false | 确定按钮节流时间，ms | | immediate | boolean | false | 防抖或者节流，是否第一次触发一次 |

属性 itemOptions options

| 属性 | 类型 | 默认值 | 说明 | | ---------- | ------- | ------- | -------------------------------------------- | | type | string | "" | 表单元素的类型 | | label | string | "" | 表单的label | | prop | string | "" | 表单绑定的字段 | | rules | array | [] | 校验规则，和element-plus用法保持一致 | | hidden | boolean | false | 表单元素是否隐藏，默认不隐藏 | | fullRow | boolean | false | 是否占满整行，默认不占满 | | fieldProps | object | {} | 表单对应元素的属性，详情查看element-plus文档 |

事件 emits

| 事件名 | 类型 | 参数 | 说明 | | ------- | --------------------------------- | ------------------------------------- | ------ | | search | funcontion: (value) => viod | value：表单的值 | 查询 | | reset | funcontion: () => viod | `` | 重置 | | change | funcontion: (prop, value) => viod | prop：表单字段名，value：表单字段的值 | 值变化 | | success | funcontion: (prop, value) => viod | | upload组件上传成功事件 |

事件 Exposes

| 事件名 | 类型 | 参数 | 说明 | | -------------- | ----------------------------------- | -------------------------------- | ---------------------------- | | validate | funcontion: (status) => viod | status：校验表单的结果 | 校验表单 | | validateField | funcontion: (status) => viod | status：校验表单指定字段的结果 | 校验表单 | | resetFields | funcontion: (status) => viod | status：重置表单的结果 | 重置表单 | | getFormValue | funcontion: ({status,data}) => viod | status：校验结果，data：表单数据 | 校验并获取表单的值 | | resetFormValue | funcontion: ({status,data}) => viod | status：校验结果，data：表单数据 | 重置并获取表单的值 | | submit | funcontion: (refName) => viod | refName：item中配置的refName | 用于触发表单中的upload组件的上传 |

表单元素类型 type

| 属性 | 类型 | | -------------------- | ---------- | | input | 输入框 | | select | 下拉选择 | | checkbox-group | 多选框组 | | radio | 单选框组 | | input-number | 数字输入框 | | input-number-range | 数字区间 | | date-picker | 日期选择器 |

示例

<template>
<JzForm ref="JzFormref" v-model="formData" :itemOptions="itemOptions" :defaultNum="defaultNum" @search="searchFun" @reset="resetFun"></JzForm>
</template>

<script setup>
import type { TFormItemOption } from "jz-element-plus";


const JzFormref = useTemplateRef("JzFormref");

const itemOptions:TFormItemOption[] = ref([
{
  type: 'select', // 表单类型 input select date
  label: '性别', // 表单label
  prop: 'gender', // 绑定字段
  rules: [], // 校验规则
  disabled: false, // 禁止操作
  fieldProps: { // select 入参配置
    getOptions: () => {
      return [
        { label: '男', value: '1' },
        { label: '女', value: '2' },
      ]
    },
    labelText: 'label',
    valueText: "value"
  }
},
])


const formData = ref({
  inquiryNo: '',
  inquiryName: '',
  holderName: '',
  insuredName: '',
  insu: '',
})

//  校验表单
const validate = async () => {
  const status = await JzFormref.value.validate();
  console.log("testForm", status);
}

//  重置表单
const resetFields = () => {
  const status = JzFormref.value.resetFields();
  console.log("testForm", status);
}

//  获取组件的值
const testForm = async () => {
  const { status, data } = await JzFormref.value.getFormValue();
  console.log("testForm", status, data);
}

// 重置表单
const testResetForm = () => {
  const { status, data } = JzFormref.value.resetFormValue();
  console.log("testResetForm", status, data);
}

</script>

JzRichText

基于wangEditor封装的富文本组件，只适用于 vue项目。

属性

| 属性名 | 类型 | 默认值 | 说明 | | :--- | :--- | :--- | :--- | | v-model | string | - | 富文本内容 |