yzt-ui

---

date created: '2022-05-10 09:48:20' date updated: '2022-05-17 10:09:54'

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-ui"

import "yzt-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）

prop	type	describe	default
v-model	string	双向绑定的值，多选用逗号隔开	""
dicCode	string	对应字典编码	!
mapLabel	string	字典数据显示字段映射	text
mapValue	string	字典数据实际值字段映射	value
multiple	boolean	是否可多选	true
placeholder	string	输入提示	请选择

---

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）

prop	type	describe	default
v-model	string	双向绑定的值，多选用逗号隔开	""
dicCode	string	对应字典编码	!
mapLabel	string	字典数据显示字段映射	text
mapValue	string	字典数据实际值字段映射	value
showAll	Boolean	是否显示全部选项 （支持插槽#prepend）	true

---

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）

prop	type	describe	default
v-model	string	双向绑定的值，多选用逗号隔开	""
dicCode	string	对应字典编码	!
mapLabel	string	字典数据显示字段映射	text
mapValue	string	字典数据实际值字段映射	value
showAll	Boolean	是否展示全选按钮	true
showAllText	string	展示全选按钮是描述的文字	全选

---

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）

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

---

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）

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"} 其他参数看官方文档	--

---

eidtor

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

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

参数说明

prop	type	describe	default
v-model	string	双向绑定符合html格式带标签的字符串文本	""
placeholder	string	输入提示	请输入内容...
disabled	boolean	是否禁用(在el-from表单上设置禁用无效，请单独设置在标签上)	false
myStyle	object	两个参数二选一 {'min-height':'设置最小高度，自动撑开',height:'设置固定高度，内容滚动'}	{ "min-height": "300px"}

---