jz-element-plus

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, jz-loading, jz-typewriter

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 的属性，详情点击查看

拓展内容

属性

JzTable

项目中通用的表格组件

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

拓展内容

属性

事件 emits

事件 expose

columns 配置项

JzTableVr

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

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

拓展内容

属性

columns

JzSelect

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

拓展内容

属性

JzCard

简介

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

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

拓展内容

属性

插槽

JzDiv

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

自主拓展的组件

拓展内容

属性

JzDialog

简介

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

拓展内容

属性

JzDivider

简介

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

拓展内容

属性

JzInputNumber

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

拓展功能

属性

JzInputNumberRange

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

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

拓展内容

注意

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

属性

JzText

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

拓展内容

属性

插槽 slot

JzDatePicker

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

拓展内容

属性

JzCheckboxGroup

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

拓展内容

属性

JzRadioGroup

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

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

拓展内容

属性

JzTitle

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

属性

JzInput

通用的输入组件

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

拓展内容

属性

JzFullLoading

命令式全屏加载组件

拓展内容

属性

方法

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

示例

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

JzSvgIcon

通用的展示SVG图标组件

拓展内容

属性

JzMessageDialog

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

属性

示例

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

JzForm

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

拓展内容

属性

属性 itemOptions options

事件 emits

事件 Exposes

表单元素类型 type

示例

<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项目。

属性

JzLoading

属性

JzTypewriter

属性