2.1.1 • Published 3 months ago

dld-vue-ui

Licence

MIT

Version

2.1.1

Deps

Size

149 kB

Vulns

Weekly

Summary Dependency Versions

组件说明

Splitpanes分割面板

属性

属性名	说明	类型	默认值
`horizontal`	布局方向	`bool`	`false`
`styles`	样式	`ISplitPaneStyle`	`{ width: '100%', height: '100%' }`

定义的类型

interface ISplitPaneStyle {
  [name: string]: string | number,
  width: string,
  height: string
}

Pane子面板

属性

属性名	说明	类型	默认值
`styles`	样式	`IPaneStyle`

定义的类型

interface IPaneStyle {
  [name: string]: string | number
}

Layout布局

属性

属性名	说明	类型	默认值
`asideWidth`	侧边栏的宽度	`number`	`220`
`headerMaxHeight`	头部的最大高度	`number`	`60`
`horizontal`	布局方向	`boolean`	`false`

插槽

属性名	说明
`aside`	侧边栏
`header`	头部

UpLoadFile单文件上传

属性

属性名	说明	类型	默认值
`size`	组件大小	`'small' \| 'default' \| 'large'`	`default`
`name`	上传按钮名称	`string`	上传文件
`icon`	自`@element-plus/icons-vue`导入的图标	`Component`	`Upload`
`type`	选择文件和上传文件的按钮类型	`ButtonType`	`success`
`accept`	选择文件的类型	string	`*`

方法

方法名	说明	类型	默认值
`upload`	上传文件方法，返回选中的File	`Function`	`(file: File): void`

暴露变量

变量名	说明	类型	默认值
`Clear`	清空选中文件	`Function`

UpLoadFiles多文件上传

属性

属性名	说明	类型	默认值
`size`	组件大小	`'small' \| 'default' \| 'large'`	`default`
`accept`	选择文件的类型	string	`*`

方法

方法名	说明	类型	默认值
`upload`	上传文件方法，返回选中的File	`Function`	`(files: File[]): void`

TableForm表单表格

属性

属性名	说明	类型	默认值
`maxHeight`	表格的最大高度	`string`	`550`
`size`	表格的大小	`'large' \| 'default' \| 'small'`	`default`
`tableData`	表格的数据	`Array<ITableData>`	`-`
`tableColumn`	表格的列配置	`Array<ITableColumn>`	`-`
`stripe`	是否为斑马纹	`boolean`	`true`
`border`	是否带有纵向边框	`boolean`	`false`
`highLight`	是否高亮当前行	`boolean`	`false`
`headStyle`	表头样式	`object`	`{}`
`type`	是否有索引、展开、多选框	`'selection' \| 'index' \| 'expand'`	`-`
`typeLabel`	索引、展开时的列名，`type == 'index'`和`type == 'expand'`时有效	`string`	`序号`
`typeWidth`	索引、展开、多选框的宽度	`number`	`60`
`typeIsFixed`	索引、展开、多选框是否固定在左侧	`typeIsFixed`	`false`
`operate`	是否有操作列	`boolean`	`false`
`operateLabel`	操作列列名	`string`	`''`
`operateWidth`	操作列的宽度	`number`	`''`
`operateIsFixed`	操作列是否固定在右侧	`boolean`	`false`
`search`	是否显示搜索按钮	`boolean`	`false`
`clear`	是否显示清空按钮	`boolean`	`false`
`edit`	是否显示行内修改按钮	`boolean`	`false`
`delete`	是否显示行内删除按钮	`boolean`	`false`
`operateSize`	搜索清楚按钮大小	`'large' \| 'default' \| 'small'`	`default`
`rowButtonSize`	删除修改按钮大小	`'large' \| 'default' \| 'small'`	`default`
`deleteTitle`	删除按钮的提示信息	`string`	`是否要删除当前行？`
`pagination`	是否有分页	`boolean`	`false`
`small`	分页是否使用小型分页	`boolean`	`false`
`total`	数据数量	`number`	`0`
`hideOnSinglePage`	只有一页时是否隐藏	`boolean`	`false`
`defaultSelect`	默认选中	`(val: ITableData) => boolean`	`-`
`defaultSize`	分页默认数量	`number`	`5`
`filter`	是否允许筛选列	`boolean`	`false`

表格的列配置属性(ITableColumn)

属性名	说明	类型	默认值
`prop`	列绑定的字段，必填	`string`	`-`
`label`	列的名称，必填	`string`	`-`
`width`	列宽	`number`	`''`
`minWidth`	最小列宽	`number`	`''`
`fixed`	是否固定	`'left' \| 'right'`	`false`
`hidden`	是否隐藏列	`boolean`	`false`
`align`	对齐方式	`'left' \| 'center' \| 'right'`	`left`
`search`	是否支持搜索	`boolean`	`false`
`disabled`	是否禁用搜索框，`search=true`时有效	`boolean`	`false`
`size`	搜索框大小，`search=true`时有效	`'large' \| 'default' \| 'small'`	`default`
`searchWidth`	搜索框的宽度，`search=true`时有效	`number`	`92%`
`placeholder`	自定义搜索提示，多项用&&分割，`search=true`时有效	`string`	`请输入{label}或请选择{label}`
`type`	搜索框类型，text=文本框、select=单选/多选框、number=数字框、date=日期框、time=时间框、datetime=日期时间框、daterange=日期范围选择框、timerange=时间范围选择框，datetimerange=日期时间范围选择框、switch=开关按钮，`search=true`时有效	`'text' \| 'select' \| 'number' \| 'date' \| 'datetime' \| 'time' \| 'daterange' \| 'timerange' \| 'datetimerange' \| 'switch'`	`text`
`options`	搜索框的下拉列表，`search=true&&type='select'`时有效	`IOptions`	`-`
`multiple`	是否支持多选，`search=true&&type='select'`时有效	`boolean`	`false`
`omit`	多选时省略，`search=true&&type='select'`时有效	`boolean`	`false`
`closeText`	开关关闭文字，`search=true&&type='switch'`时有效	`string`	`-`
`openText`	开关打开文字，`search=true&&type='switch'`时有效	`string`	`-`
`max`	数字框的最大值，`search=true&&type='number'`时有效	`number`	`Infinity`
`min`	数字框的最小值，`search=true&&type='number'`时有效	`number`	`-Infinity`
`step`	数字框的跳动步数，`search=true&&type='number'`时有效	`number`	`1`
`costom`	自定义内容，支持html	`Function`	`ITableData`
`component`	自定义组件	`Component`	`-`
`filter`	列是否允许筛选	`boolean`	`false`
`check`	表格列是否默认选中	`boolean`	`false`

方法

方法名	说明	参数
`row-click`	行点击事件	`(e: 'row-click', item: ITableData): void;`
`row-dblclick`	行双击事件	`(e: 'row-dblclick', item: ITableData): void;`
`selection-change`	选中行改变事件	`(e: 'selection-change', item: ITableData[]): void;`
`search`	搜索按钮点击、输入框回车事件	`(e: 'search', item: ITableData): void;`
`clear`	清空按钮点击事件	`(e: 'clear', pageIndex: number, pageSize: number): void;`
`delete`	删除按钮点击事件	`(e: 'delete', item: ITableData): void;`
`edit`	修改按钮点击事件	`(e: 'edit', item: ITableData): void;`
`page-change`	页码、每页数量变化事件	`(e: "page-change", pageIndex: number, pageSize: number): void;`
`filter`	筛选按钮点击事件	`(e: 'filter', callback: Function): void;`

组件方法

方法名	说明	参数
`Assignment`	初始操作赋值	`(items: Array<any>): void;`
`GetParameters`	获取搜索参数	`(): ITableData;`
`SetFilter`	初始化筛选状态	`(items: any): void;`

[
 {
	prop: "", //列参数
	label: "" //列值
 }
]

插槽

插槽名	说明
`header`	表格上方的内容
`expand`	展开的内容，`row`参数携带行数据
`operate-front`	操作列头的自定义内容，位置在搜索、清空之前
`operate-middle`	操作列头的自定义内容，位置在搜索之后、清空之前
`operate`	操作列头的自定义内容，位置在搜索、清空之后
`row-operate-front`	操作列的自定义内容，位置在修改、删除之前,`row`参数携带行数据
`row-operate-middle`	操作列的自定义内容，位置在修改之后、删除之前，`row`参数携带行数据
`row-operate`	操作列的自定义内容，位置在修改、删除之后，`row`参数携带行数据

可导入的类型

export interface ITableColumn {
  /**
   * 列绑定的字段
   */
  prop: string,
  /**
   * 列的名称
   */
  label: string,
  /**
   * 列宽
   */
  width?: number,
  /**
   * 是否固定
   */
  fixed?: 'left' | 'right',
  /**
   * 对齐方式
   */
  align?: 'left' | 'center' | 'right',
  /**
   * 是否支持搜索
   */
  search?: boolean,
  /**
   * 禁用搜索框
   */
  disabled?: boolean,
  /**
   * 搜索框大小
   */
  size?: 'large' | 'default' | 'small',
  /**
   * 搜索框的宽度
   */
  searchWidth?: number,
  /**
   * 自定义搜索提示，多项用&&分割
   */
  placeholder?: string,
  /**
   * 搜索框类型
   */
  type?: 'text' | 'select' | 'number' | 'date' | 'datetime' | 'time' | 'daterange' | 'timerange' | 'datetimerange' | 'switch',
  /**
   * 搜索框的下拉列表，type='select'有效
   */
  options?: IOptions[],
  /**
   * 是否支持多选
   */
  multiple?: boolean,
  /**
   * 多选时省略
   */
  omit?: boolean,
  /**
   * 开关关闭文字
   */
  closeText?: string,
  /**
   * 开关打开文字
   */
  openText?: string,
  /**
   * 数字框的最大值
   */
  max?: number,
  /**
   * 数字框的最小值
   */
  min?: number,
  /**
   * 数字框步长
   */
  step?: number,
  /**
   * 自定义
   */
  costom?: (val: ITableData) => string,
  /**
   * 表格内容溢出
   */
  overflow?: boolean,
  /**
   * 是否隐藏列
   */
  hidden?: boolean,
  /**
   * 组件
   */
  component?: Component,
  /**
   * 允许筛选
   */
  filter?: boolean,
  /**
   * 是否默认选中
   */
  check?: boolean
}
/**
 * 表单格式
 */
export interface ITableData {
  [name: string]: unknown
}
/**
 * 下拉框选项
 */
export interface IOptions {
  /**
   * 显示文本
   */
  label?: string,
  /**
   * 选择的值
   */
  value: string | number,
  /**
   * 是否禁用
   */
  disabled?: boolean
}

带表单弹出框

属性

属性名	说明	类型	默认值
`form`	表单值	`FormType`	`{}`
`title`	弹框标题	`string`	`弹出框`
`width`	弹框大小	`string`	`500px`
`fullscreen`	全屏模式	`boolean`	`false`
`draggable`	可拖动	`boolean`	`true`
`footer`	底部按钮	`boolean`	`true`
`buttonSize`	底部按钮大小	`'large' \| 'default' \| 'small'`	`'default'`
`loading`	按钮的提交状态	`boolean`	`false`
`rules`	表单验证	`any`	`{}`
`formSize`	表单大小	`'large' \| 'default' \| 'small'`	`'default'`
`lableWidth`	标签长度	`string`	`120px`

FormType定义


export interface FormType {
  [key: string]: FormItemType;
}

表单FormItemType配置

属性名	说明	类型	默认值
`label`	标签名	`string`
`default`	表单项的值	`string`\| `number`\| `null`\| `boolean`\| `Date`\| `Object`\| `Array<string \| number \| null \| boolean \| Date \| Object \| Array<any>>`
`type`	表单项类型text=文本框、select=单选/多选框、number=数字框、date=日期框、time=时间框、datetime=日期时间框、daterange=日期范围选择框、timerange=时间范围选择框，datetimerange=日期时间范围选择框、switch=开关按钮	`'text'\| 'select'\| 'number'\| 'date'\| 'datetime'\| 'time'\| 'daterange'\| 'timerange'\| 'datetimerange'\| 'switch'`	`text`
`size`	输入框大小	`'large' \| 'default' \| 'small'`	`'default'`
`width`	标签宽度	`string`	`90%`
`disabled`	是否禁用	`boolean`	`false`
`readonly`	只读 select和switch无效	`boolean`	`false`
`placeholder`	输入框提示日期范围使用&&分割	`string`	`请输入${label} \| 请选择${label}`
`max`	最大数值 type=number生效	`number`	Infinity
`min`	最小数值 type=number生效	`number`	-Infinity
`step`	步序 type=number生效	`number`	1
`multiple`	是否支持多选 type=select生效	`boolean`	`false`
`omit`	多选时省略 type=select生效	`boolean`	`false`
`options`	搜索框的下拉列表，type='select'有效, 参考表格配置	`IOptions[]`	`[]`
`closeText`	开关关闭文字 type=switch生效	`string`	`null`
`openText`	开关打开文字 type=switch生效	`string`	`null`

方法

方法名	说明	参数
`close`	弹窗关闭回调	`(e: 'close'): void`
`submit`	提交按钮回调	`(e: 'submit'): void`

自定义为空校验

/**
 *
 * @param rule 自定义为空检验
 * @param value
 * @param callback
 * @returns
 */
export function FormValidate(rule: any, value: FormItemType, callback: any) {
  if (value.default == null || value.default.toString() == "") {
    return callback(new Error(value.label + "不能为空"));
  }
  return callback();
}