# secondary_encapsulation_ellement

**Repository Path**: yhuayi/secondary_encapsulation_ellement

## Basic Information

- **Project Name**: secondary_encapsulation_ellement
- **Description**: 二次封装element框架，用于飞博公司后台页面
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-06-11
- **Last Updated**: 2024-07-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 基于element-plus封装的组件库项目
我们这里封装的组件库主要针对后台系统;
由于公司使用的是ruoyi框架；而ruoyi使用的element-plus进行封装，所以
这里我们先使用element-plus进行封装

等到后期自己的技术不断成熟后，再封装底层组件

# 主要组件
我们先来聊一下后台有哪些主要部分组成
- 表单
- 表格
- 分页器
- 弹框
接下来,我们对这4大部分一一展开来说

# form表单
我们的表单中的类型又有哪些呢？
- 输入框
- 下拉列表
- 多级下拉列表
- 日期选择器，时间选择器
- 上传组件
- 文本编辑器
- 自定义组件

## 写在前面

在封装的过程中，我们遇到了许多挑战，接下来我们会一一列举，在未来的开发中可能会对我们有所帮助

### typescript中动态属性

根据用户输入的inputType动态确定其他属性。例如：输入 `inputType: "input"` 以后，其他属性就是input中所使用到的属性；其他与 input 不相关的属性全部消除。

此时，我们就可以使用`联合数据类型`。





## 输入框 HyElInput
输入框接收参数的`interface`如下

```typescript
/**
 * @description 自定义框架HyElInput中可以接收的参数
 * @param P  params的泛型
 * @param D data的泛型
 */
export interface HyInputFormItemInterface<P, D> {
  inputType: "input",
  form?: Object,
  field?: string,
  url?: string,
  method?: string,
  params?: P,
  data?: D,
  //大小,默认为default
  size?: 'large' | 'default' | 'small',
  //原生id属性
  id?: string,
  //标签展示标题
  label?: string,
  placeholder?:string,
  clearable?:boolean,
  showPassword?:boolean,
  showWordLimit?:boolean,
  suffixIcon?:any,
  prefixIcon?:any,
  autofocus?:boolean,
  inputStyle?:StyleSheet
  //form中的属性,如果传入该字段,我们将从后端传过来的JSON数据取出
  //该属性
  name?: string,
  /**
   * @description 关于value和url
   * url的优先级更高,
   * 如果传入了url,那么我们将会请求接口
   */
  value?: any,
  //数据校验规则,跟element-plus相同,具体属性不再赘述
  rule?: Array<any>,//注意,这里传入的只是每一个formItem,所以传入的不是对象
  //是否可用,
  //在一些场景下,有些字段可以修改,有些不能修改,此时
  //该属性就可以派上用场了
  isDisabled?: boolean,
  //是否显示清除按钮
  isClearable?: boolean,
  //关于只读,这里我们不再使用 element-plus 提供的,而是直接将结果
  //转为elFormItem标签 + span标签进行展示
  isReadonly?: boolean,
  modelValue?: any,
  maxlength?: number | string,
  minlength?: number | string,
  resize?: 'none' | 'both' | 'horizontal' | 'vertical',
  autosize?: boolean,
  validateEvent?:boolean,
  focus?: Function,
  blur?: Function,
  change?: Function,
  click?: Function,
  regExpCallback?: Function,
  //请求之间的回调(未获取数据)
  requestCallback?: Function,
  /**
   * 请求之后的回调(已经获取数据)
   */
  responseCallback?: Function,
}

```



## 表格数据
- 
## 分页器
## 弹框