yzt-enterprise-ui v1.0.6

date created: "2022-05-10 09:48:20"

date updated: "2022-12-09 15:56:00"

Version <版本说明>

2022-12-9 version:1.0.5

整合 0.2 和 0.3 版本，排查一些版本遗漏

新增详情表单底部按钮加载状态，修复图片预览无法关闭弹窗

Vue 3 + TypeScript + Vite （私人使用）

基于 element-plus UI 组件二次开发封装，适应公司业务系统

注意：

1. 由于基于 element-plus开发

2. 本发布包处于开发阶段 上传到 npm 上的包是未经过压缩的，可以直接看源码了解用法

全局使用

import { createApp } from "vue";

import App from "./App.vue";

import YZTUI, { IRegister } from "yzt-enterprise-ui";

import "yzt-enterprise-ui/style.css";

const register: IRegister = {};

const app = createApp(App);

app.use(YZTUI, { register: register });

app.mount("#app");

09:31:22 删除 以下 改用在 YZTUI 中引用 无需再次引用 import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' app.use(ElementPlus)

使用帮助

二次开发组件

• buttom

• dicSelect

• dicRadio

• dicCheckbox

• datePickRange

• regionSelect

• editor

组件详解

button

1. 为了统一系统按钮样式，把常用 buttom 二次封装

2. 插槽属性和 el-buttom 全部一样，这里只是做了默认处理

3. 由于 查看 编辑 删除 常用于 table 表格行内，故给默认属性 size='small' 和 plain='true'

<template>
    <y-button-add>新增</y-button-add>

    <y-button-import>导入</y-button-import>

    <y-button-export>导出</y-button-export>

    <y-button-read>查看</y-button-read>

    <y-button-edit>编辑</y-button-edit>

    <y-button-del>删除</y-button-del>
</template>

dicSelect

<y-dic-select v-model="selectValue" dicCode="testCode" clearable></y-dic-radio>

1. 字典封装成下拉选择组件，传入指定 dicCode 即可展示下拉选择
2. 使用该组件前请先实现 配置 getDicByCode 方法

import YZTUI, { IRegister } from "yzt-ui";
const register: IRegister = {
  getDicByCode: async (dicCode: string) => {
    // todo 获取字典方法
    return [{ text: "text", value: "value" }];
  },
};
app.use(YZTUI, { register: register });

参数说明 （未列出来的属性请参考 el-select）

dicRadio

<y-dic-radio v-model="selectValue" dicCode="testCode"></y-dic-radio>

1. 字典封装成但选组件，传入指定 dicCode 即可展示单选组
2. 使用该组件前请先实现 配置 getDicByCode 方法（同 dicSelect）

import YZTUI, { IRegister } from "yzt-ui";
const register: IRegister = {
  getDicByCode: async (dicCode: string) => {
    // todo 获取字典方法
    return [{ text: "text", value: "value" }];
  },
};
app.use(YZTUI, { register: register });

参数说明 （未列出来的属性请参考 el-radio）

dicCheckbox

<y-dic-checkbox v-model="selectValues" dicCode="testCode"></y-dic-checkbox>

1. 字典封装成但选组件，传入指定 dicCode 即可展示多选组
2. 使用该组件前请先实现 配置 getDicByCode 方法（同 dicSelect）

import YZTUI, { IRegister } from "yzt-ui";
const register: IRegister = {
  getDicByCode: async (dicCode: string) => {
    // todo 获取字典方法
    return [{ text: "text", value: "value" }];
  },
};
app.use(YZTUI, { register: register });

参数说明 （未列出来的属性请参考 el-checkbox）

datePickerRange

     
<y-date-picker-range v-model:startTime="dateTime.startTime" v-model:endTime="dateTime.endTime">
       
</y-date-picker-range>

1. 时间范围选择二次封装
2. 由于 elementPlus 时间范围选择只支持传入常度为 2 的数组time1,time2对系统需求不是很友好
3. 二次封装后支持绑定两个 v-model，实现对应两个字段

参数说明 （未列出来的属性请参考 el-date-picker）

regionSelect

 <y-region-select v-model="regionValue" :filterData="filterData">  </y-region-select>

1. 区域级联选择组件封装
2. 基于 elementPlus 级联选择el-cascader
3. 使用该组件请注册区域编码数据regionData

interface RegionList {
  region_code: string;
  region_name: string;
  parent_code: string;
  [key: string]: string;
}
import YZTUI, { IRegister } from "yzt-ui";
const register: IRegister = {
  regionData: regionList as RegionList[],
};
app.use(YZTUI, { register: register });

参数说明 （未列出来的属性请参考 el-cascader）

eidtor

  <y-eidtor v-model="editorValue">      </y-eidtor>

1. 基于wangeditor二次封装的
2. 修改某些默认配置

参数说明