整合 0.2 和 0.3 版本,排查一些版本遗漏
新增详情表单底部按钮加载状态,修复图片预览无法关闭弹窗
注意:
-
由于基于 element-plus开发
-
本发布包处于开发阶段 上传到 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 二次封装
-
插槽属性和 el-buttom 全部一样,这里只是做了默认处理
-
由于 查看 编辑 删除 常用于 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>
<y-dic-select v-model="selectValue" dicCode="testCode" clearable></y-dic-radio>
- 字典封装成下拉选择组件,传入指定 dicCode 即可展示下拉选择
- 使用该组件前请先实现 配置 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 });
prop | type | describe | default |
---|---|---|---|
v-model | string |
双向绑定的值,多选用逗号隔开 | "" |
dicCode | string |
对应字典编码 | ! |
mapLabel | string |
字典数据显示字段映射 | text |
mapValue | string |
字典数据实际值字段映射 | value |
multiple | boolean |
是否可多选 | true |
placeholder | string |
输入提示 | 请选择 |
<y-dic-radio v-model="selectValue" dicCode="testCode"></y-dic-radio>
- 字典封装成但选组件,传入指定 dicCode 即可展示单选组
- 使用该组件前请先实现 配置 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 });
prop | type | describe | default |
---|---|---|---|
v-model | string |
双向绑定的值,多选用逗号隔开 | "" |
dicCode | string |
对应字典编码 | ! |
mapLabel | string |
字典数据显示字段映射 | text |
mapValue | string |
字典数据实际值字段映射 | value |
showAll | Boolean |
是否显示全部选项 (支持插槽#prepend ) |
true |
<y-dic-checkbox v-model="selectValues" dicCode="testCode"></y-dic-checkbox>
- 字典封装成但选组件,传入指定 dicCode 即可展示多选组
- 使用该组件前请先实现 配置 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 });
prop | type | describe | default |
---|---|---|---|
v-model | string |
双向绑定的值,多选用逗号隔开 | "" |
dicCode | string |
对应字典编码 | ! |
mapLabel | string |
字典数据显示字段映射 | text |
mapValue | string |
字典数据实际值字段映射 | value |
showAll | Boolean |
是否展示全选按钮 | true |
showAllText | string |
展示全选按钮是描述的文字 | 全选 |
<y-date-picker-range v-model:startTime="dateTime.startTime" v-model:endTime="dateTime.endTime">
</y-date-picker-range>
- 时间范围选择二次封装
- 由于 elementPlus 时间范围选择只支持传入常度为 2 的数组[time1,time2]对系统需求不是很友好
- 二次封装后支持绑定两个 v-model,实现对应两个字段
prop | type | describe | default |
---|---|---|---|
v-model:startTime | String, Date |
双向绑定的值(开始时间) | "" |
v-model:endTime | String, Date |
双向绑定的值(结束时间) | "" |
type | 'date'&'datetime'&'month' |
日期选择&日期时间选择&月份选择 | date |
valueFormat | String |
时间格式化 | YYYY-MM-DD HH:mm:ss |
<y-region-select v-model="regionValue" :filterData="filterData"> </y-region-select>
- 区域级联选择组件封装
- 基于 elementPlus 级联选择
el-cascader
- 使用该组件请注册区域编码数据
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 });
prop | type | describe | default |
---|---|---|---|
v-model | String |
双向绑定的值,多选区域请用逗号(,)隔开 | "" |
pcode | String |
区域第一级父编码 | 000000000000 |
placeholder | String |
输入提示 | 请选择 |
multiple | Boolean |
是否多选 | false |
checkStrictly | Boolean |
是否可选任意一级(为false 时只能选到最后一级) |
false |
filterData | Function |
数据自定义过滤方法 ({region_code,region_name,parent_code})=>Boolean
|
null |
props | Object |
{value: "region_code",label: "region_name", children: "children"} 其他参数看官方文档 |
-- |
<y-eidtor v-model="editorValue"> </y-eidtor>
- 基于
wangeditor
二次封装的 - 修改某些默认配置
prop | type | describe | default |
---|---|---|---|
v-model | string |
双向绑定符合html 格式带标签的字符串文本 | "" |
placeholder | string |
输入提示 | 请输入内容... |
disabled | boolean |
是否禁用(在 el-from 表单上设置禁用无效,请单独设置在标签上) | false |
myStyle | object |
两个参数二选一 {'min-height':'设置最小高度,自动撑开',height:'设置固定高度,内容滚动'}
|
{ "min-height": "300px"} |