初识前端搬砖神器--AVUE
一、前言
最近在开发项目过程中使用到了框架AVUE，他是基于elementUI和VUE高度封装后的框架，其特点是省时、省力(避免大量的CV操作)，刚开始可能有些许的不习惯，使用了几天熟悉后就会感受到快乐了~下面我把使用属性分别用中文标示出来供大家查阅。
二、各参数意义
1.表格form
import { PopoverPlacement } from 'element-ui/types/popover';
import { AvueComponentSize, Obj } from '../global';
/**
* 表单项事件参数，适用于click|blur|focus
*/
interface FormColumnEventParams {
/** 表单项值 */
value: any;
/** 鼠标点击事件$event */
event: MouseEvent;
/** 表单项列配置 */
column: AvueFormColumn;
}
/** 表单项基本配置属性 */
interface FormBaseColumn {
/** 列类型, 默认: 'input' */
type?: string;
/** 列字段(唯一不重复) */
prop: string;
/** 深结构数据绑定取值 */
bind?: string;
/** 标题名称 */
label: string;
/** 标题名称宽度, 默认: 110 */
labelWidth?: number;
/** 表单域标签的位置，如果值为 left 或者 right 时，则需要设置 labelWidth, 默认: 'right' */
labelPosition?: 'left' | 'right' | 'top';
/** 弹窗编辑文字提示 */
tip?: string;
/**
* 辅助文字提示展示方向
* @since 2.8.2
*/
tipPlacement?: PopoverPlacement;
/** 标题文字提示 */
labelTip?: string;
/**
* 标题文字提示展示方向
* @since 2.8.2
*/
labelTipPlacement?: PopoverPlacement;
/** placeholder */
placeholder?: string;
/** 只读, 默认: false */
readonly?: boolean;
/** 是否可以清空选项, 默认: false */
clearable?: boolean;
/** 禁止编辑, 默认: false */
disabled?: boolean;
/** 校验规则 */
rules?: Obj[];
/** 控件大小 */
size?: AvueComponentSize;
/** 是否可见, 默认: true */
display?: boolean;
/** 默认值 */
value?: any;
/**
* 字段位置排序
* @description 不同版本中排序规则并不相同：`2.7.9 - 2.8.26`中，order值越小位置越靠前，其余版本值越大位置越靠前。自用版本自 `2.9.12` 改为值越小位置越靠前
*/
order?: number;
/** 数据类型转化时的分隔符，配合dataType使用, 默认: ', */
separator?: string;
/** 数据类型用于数组和字符串之间的转化 */
dataType?: 'string' | 'number' | 'array';
/**
* 自定义样式
* @since 2.7.1
*/
className?: string;
}
/** 表单项列宽配置 */
interface FormColumnColOption {
/** 栅列, 默认: 12 */
span: number;
/**
* ≥768px 响应式栅格数或者栅格属性对象, 默认: 12
* @since 2.8.12
*/
smSpan: ResponsiveColumn;
/**
* <768px 响应式栅格数或者栅格属性对象, 默认: 24
* @since 2.8.12
*/
xsSpan: ResponsiveColumn;
/**
* 栅格左侧的间隔格数, 默认: 0
* @since 2.8.12
*/
offset: number;
/** 表单项是否单独成行, 默认: false */
row: boolean;
}
/** 表单项字典配置 */
interface FormColumnDicOption {
/**
* 字典
*
* 默认为{label, value}，其中label为显示，value为取值。可通过props属性调整
*/
dicData: Obj[];
/** 远程字典地址 */
dicUrl: string;
/** 字典请求方式，配合dicUrl使用 */
dicMethod: 'get' | 'GET' | 'post' | 'POST';
/** 字典请求参数，配合dicUrl使用 */
dicQuery: Obj;
/** 字典数据返回的执行函数，配合dicUrl使用 */
dicFormatter: (value: any) => Obj[];
/** 参数配置项 */
props: Partial<{
/** 名称属性值, 默认: 'label' */
label: string;
/** 值属性值, 默认: 'value' */
value: string;
/** 子属性值, 默认: 'children' */
children: string;
/** 返回的数据格式, 默认: '' */
res: string;
}>;
}
/** 表单项通用事件 */
interface FormColumnEvent {
/**
* 字段控制器, 不使用箭头函数
* @example https://avuejs.com/form/form-control.html
* @since 2.8.6
*/
control: (value: any, form: Obj) => Record<string, Partial<AvueFormColumn>>;
/** 点击事件, 不使用箭头函数 */
click: (params: FormColumnEventParams) => void;
/** 值改变事件, 不使用箭头函数 */
change: (params: Omit<FormColumnEventParams, 'event'>) => void;
/** 聚焦事件, 不使用箭头函数 */
focus: (params: FormColumnEventParams) => void;
/** 失焦事件, 不使用箭头函数 */
blur: (params: FormColumnEventParams) => void;
}
/** 表单项通用参数 */
export interface AvueFormBaseColumn
extends FormBaseColumn,
Partial<FormColumnColOption>,
Partial<FormColumnDicOption>,
Partial<FormColumnEvent> {
/** 底部操作栏栅列, 默认: 12 */
menuSpan?: number;
/**
* 表单自定义, 默认: false
* @deprecated 2.8.0
*/
fromslot?: boolean;
/**
* 表单标题自定义, 默认: false
* @deprecated 2.8.0
*/
labelslot?: boolean;
/**
* 表单错误自定义, 默认: false
* @deprecated 2.8.0
*/
errorslot?: boolean;
/**
* 组件下拉自定义, 默认: false
* @deprecated 2.8.0
*/
typeslot?: boolean;
}
/**
* 表单项配置
* TODO 表单项个性化配置待完成
*/
export interface AvueFormColumn extends AvueFormBaseColumn {
/** 其他配置 */
[x: string]: any;
}
2.弹窗doalog
import { ElDialog } from 'element-ui/types/dialog';
import { FormOption } from '../form/option';
/** 表单弹窗 */
export declare class DialogForm {
/** 构建弹窗 */
initMounted: () => void;
/**
* 显示弹窗
*/
show: (option: DialogFormOption) => void;
}
/** 表单弹窗配置项 */
export interface DialogFormOption extends ElDialog {
/** 弹窗标题 */
title: string;
/** 表单配置 */
option: FormOption;
/** 表单提交后的回调 */
callback?: (params: {
/** 表单值 */
data: Obj;
/** 关闭弹窗 */
close: () => void;
/** 将表单置于普通状态 */
done: () => void;
}) => void;
}
3.属性option
import { AvueAlignment, AvueMenuType, AvueComponentSize, Obj } from '../global';
import { AvueCrudColumn } from './column';
/** 表格组件基础配置属性 */
interface CrudBaseOption {
// ======== 表格基础配置 ========
/** 视图类型 */
boxType: 'add' | 'edit' | 'view';
/** 是否详情模式, 默认: false */
detail: boolean;
/** 表格标题 */
title: string;
/** 表头标题所用的HTML标签, 默认: 'h2' */
titleSize: string;
/** 表头对齐方式, 默认: 'center' */
headerAlign: AvueAlignment;
/** 表格列齐方式, 默认: 'center' */
align: AvueAlignment;
/** 表格边框, 默认: false */
border: boolean;
/** 表格高度差（主要用于减去其他部分让表格高度自适应） */
calcHeight?: number;
/** 列显隐按钮, 默认: true */
columnBtn: boolean;
/** 列显隐按钮, 默认: 'el-icon-s-operation' */
columnBtnIcon: string;
/** 表格的排序字段 */
defaultSort?: {
/** 默认排序字段 */
prop: string;
/** 排序方式 */
order: string;
};
/** 空数据时显示的文本内容，也可以通过slot="empty"设置, 默认: '暂无数据' */
emptyText: string;
/** 是列的宽度是否自撑开属性, 默认: true */
fit: boolean;
/** 表格高度 */
height?: number | 'auto';
/** 头部显隐, 默认: true */
header: boolean;
/** 是否显示表格序号（根据分页会自动计算，比如每页10行，到了第二页就会从11开始记数, 默认: false */
index: boolean;
/** 序号的标题, 默认: '#' */
indexLabel: string;
/** 序号的宽度, 默认: 50 */
indexWidth: number;
/** 序号是否冻结, 默认: 'left' */
indexFixed: boolean | AvueAlignment;
/** 行数据的 Key的主键，用于其他相关操作, 默认: 'id' */
rowKey: string;
/** 设置 indeterminate 状态，只负责样式控制 如果选择一半，不会出现半选, 默认: false */
indeterminate: boolean;
/** 表格最大高度 */
maxHeight?: number;
/** 字段排序, 默认: 0 */
order?: number;
/** 是否显示表格的表头, 默认: true */
showHeader: boolean;
/** 控件大小 */
size: AvueComponentSize;
/** 是否显示表格的斑马条纹, 默认: false */
stripe: boolean;
// ======== 表格分页配置 ========
/**
* 是否显示分页, 默认: true
* @since 2.8.11
*/
page: boolean;
/**
* 只有一页时是否隐藏分页, 默认: false
* @since 2.4.1
*/
simplePage: boolean;
// ======== 表格合计配置 ========
/** 是否在表尾显示合计行, 默认: false */
showSummary: boolean;
/** 表格合计需要配置的字段 */
sumColumnList: Obj[];
// ======== 表格行折叠配置 ========
/** 是否展开折叠行, 默认: false */
expand: boolean;
/** 是否展开折叠行宽度, 默认: 60 */
expandWidth: number;
/** 是否展开折叠行冻结, 默认: 'left' */
expandFixed: boolean | AvueAlignment;
/** 是否默认展开所有行，"expand"为true的时候有效, 默认: false */
defaultExpandAll: boolean;
/** 可以通过该属性设置目前的展开行，需要设置 rowKey 属性才能使用，该属性为展开行的 keys 数组。 */
expandRowKeys: any[];
// ======== 表格行勾选配置 ========
/** 行可勾选, 默认: false */
selection: boolean;
/** 行可勾选的宽度, 默认: 50 */
selectionWidth: number;
/** 行可勾选是否冻结, 默认: 'left' */
selectionFixed: boolean | AvueAlignment;
/** 行可勾选是否显示tip信息, 默认: true */
tip: boolean;
/**
* 仅对 selection为true 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选
* @param row 所在行数据
* @param index 行号
*/
selectable: (row: Obj, index: number) => boolean;
/** 仅对 selection为true 的列有效，为 true 则会在数据更新之后保留之前选中的数据（需指定 rowKey）, 默认: true */
reserveSelection: boolean;
/** 清空选中按钮（当selection为true起作用）, 默认: true */
selectClearBtn: boolean;
// ======== 表格树配置 ========
/**
* 是否为表格树，若无配置，判断数据项中是否包含children，若包含，则为true, 默认: false
* @since 2.5.0
*/
tree: boolean;
/**
* 是否开启懒加载，通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点, 默认: false
* @since 2.3.0
*/
lazy: boolean;
/**
* 行数据的 上级Key的主键，用于树其他相关操作, 默认: 'parentId'
* @since 2.6.15
*/
rowParentKey: string;
// ======== 其他配置 ========
/** 是否开启表格排序, 默认: false */
sortable: boolean;
/** 是否以tab形式展示group, 默认: false */
tabs: boolean;
}
/** 表格组件菜单栏配置 */
interface CurdMenuOption {
/** 是否显示操作菜单栏, 默认: true */
menu: boolean;
/** 操作菜单栏的宽度, 默认: 220 */
menuWidth: number;
/** 手机端时操作菜单栏的宽度, 默认: 100 */
menuXsWidth: number;
/**
* 菜单栏标题对齐方式, 默认: 'center'
* @since 2.6.0
*/
menuHeaderAlign: AvueAlignment;
/** 菜单栏对齐方式, 默认: 'center' */
menuAlign: AvueAlignment;
/** 操作栏菜单按钮类型, 默认: 'text' */
menuType: AvueMenuType;
/** 菜单下拉按钮的文字，仅在menuType为'menu'时生效, 默认: '功能' */
menuBtnTitle: string;
/** 操作列的文字, 默认: '操作' */
menuTitle: string;
/** 操作列是否冻结, 默认: 'right' */
menuFixed: boolean | 'left' | 'right';
}
/** 表格操作按钮及对应功能配置 */
interface CrudActionOption {
// ==== menuLeft ====
/** 是否显示新增按钮, 默认: true */
addBtn: boolean;
/** 新增按钮, 默认: '新 增' */
addBtnText: string;
/** 自定义过滤按钮图标, 默认: 'el-icon-plus' */
addBtnIcon: string;
/** 新增窗口标题文案, 默认: '新 增' */
addTitle: string;
/**
* 是否显示新增行按钮, 默认: false
*
* tip: 该按钮的功能为点击后在表格中新增一行
* @since 2.6.9
*/
addRowBtn: boolean;
// ==== menuRight ====
/** 是否显示保存按钮, 默认: true */
saveBtn: boolean;
/** 弹出框为新增时保存按钮标题, 默认: '新 增' */
saveBtnText: string;
/** 弹出框为新增时保存按钮图标, 默认: 'el-icon-circle-plus-outline' */
saveBtnIcon: string;
/** 是否显示日期组件按钮, 默认: false */
dateBtn: boolean;
/** 日期控件默认的值, 默认: false */
dateDefault: boolean;
/** 是否显示Excel打印按钮, 默认: false */
excelBtn: boolean;
/** Excel打印按钮文案, 默认: '导出' */
excelBtnText: string;
/** Excel打印按钮图标, 默认: 'el-icon-download' */
excelBtnIcon: string;
/** 是否显示自定义过滤按钮, 默认: false */
filterBtn: boolean;
/** 自定义过滤按钮图标, 默认: 'el-icon-tickets' */
filterBtnIcon: string;
/** 是否显示打印按钮, 默认: false */
printBtn: boolean;
/** 打印按钮文案, 默认: '打印' */
printBtnText: string;
/** 打印按钮图标, 默认: 'el-icon-printer' */
printBtnIcon: string;
/** 是否显示刷新按钮, 默认: true */
refreshBtn: boolean;
/** 自定义过滤按钮图标, 默认: 'el-icon-refresh' */
refreshBtnIcon: string;
/** 是否显示搜索显隐按钮, 默认: true */
searchShowBtn: boolean;
/** 搜索按钮图标, 默认: 'el-icon-search' */
searchBtnIcon: string;
}
/** 表格行操作按钮及对应功能配置 */
interface CrudRowActionOption {
// ======== 表格弹窗操作 ========
// ==== 复制新增功能 ====
/** 是否显示复制新增按钮, 默认: false */
copyBtn: boolean;
/** 复制新增按钮文案, 默认: '复 制' */
copyBtnText: string;
/** 复制新增按钮图标, 默认: 'el-icon-document-add' */
copyBtnIcon: string;
// ==== 编辑功能 ====
/** 是否显示行内编辑按钮, 默认: true */
editBtn: boolean;
/** 编辑按钮文案, 默认: '编辑' */
editBtnText: string;
/** 编辑按钮图标, 默认: 'el-icon-edit' */
editBtnIcon: string;
/** 编辑窗口标题文案, 默认: '编 辑' */
editTitle: string;
/** 是否显示更新按钮, 默认: true */
updateBtn: boolean;
/** 弹出框为编辑时保存按钮标题, 默认: '修 改' */
updateBtnText: string;
/** 弹出框为编辑时保存按钮图标, 默认: 'el-icon-circle-check' */
updateBtnIcon: string;
// ==== 查看功能 ====
/** 是否显示查看按钮, 默认: false */
viewBtn: boolean;
/** 查看按钮文案, 默认: '查看' */
viewBtnText: string;
/** 查看按钮图标, 默认: 'el-icon-view' */
viewBtnIcon: string;
/** 查看窗口标题文案, 默认: '查 看' */
viewTitle: string;
// ==== 删除功能 ====
/** 是否显示删除按钮, 默认: true */
delBtn: boolean;
/** 删除按钮文案, 默认: '删 除' */
delBtnText: string;
/** 删除按钮图标, 默认: 'el-icon-delete' */
delBtnIcon: string;
// ======== 表格行内操作 ========
/** 表格单元格可编辑（当column中有搜索的属性中有cell为true的属性启用，只对type为select和input有作用), 默认: false */
cellBtn: boolean;
/** 是否显示行编辑取消按钮, 默认: true */
cancelBtn: boolean;
/** 编辑取消按钮文案, 默认: '取 消' */
cancelBtnText: string;
/** 删除按钮图标, 默认: 'el-icon-circle-close' */
cancelBtnIcon: string;
}
/** 表格组件弹窗配置 */
interface CrudDialogOption {
// ======== 弹窗配置 ========
/** 是否为全屏Dialog, 默认: false */
dialogFullscreen: boolean;
/** 是否可以通过按下ESC关闭Dialog, 默认: true */
dialogEscape: boolean;
/** 是否可以通过点击modal关闭Dialog, 默认: true */
dialogClickModal: boolean;
/** 是否显示关闭按钮, 默认: true */
dialogCloseBtn: boolean;
/** 是否需要遮罩层, 默认: true */
dialogModal: boolean;
/** 弹出表单的弹窗具体顶部的距离(px), 默认: '0' */
dialogTop: string | number;
/** 弹出表单的类型, 默认: dialog */
dialogType: 'dialog' | 'drawer';
/** 弹出表单的弹窗宽度, 默认: '60%' */
dialogWidth: string;
/**
* 是否允许拖拽, 默认: true
* @since 2.9.0
*/
dialogDrag: boolean;
// ======== 弹窗表单配置 ========
/** 回车提交表单, 默认: false */
enter: boolean;
/** 弹出表单的label宽度, 默认: 90 */
labelWidth: number;
/**
* 弹出表单按钮组的位置, 默认: 'right'
* @deprecated 2.7.9
*/
menuPosition: AvueAlignment;
/**
* 弹出表单按钮组的位置, 默认: 'right'
* @since 2.7.9
*/
dialogMenuPosition: AvueAlignment;
}
/** 表格组件_搜索组件配置 */
interface CrudSearchOption {
/** 首次加载是否显示搜索, 默认: true */
searchShow: boolean;
/** 回车提交表单, 默认: true */
searchEnter: boolean;
/** 是否展示半收缩按钮, 默认: true */
searchIcon: boolean;
/** 展示半收缩按钮的个数, 默认: 2 */
searchIndex: number;
/** 搜索项的长度, 默认: 6 */
searchSpan: number;
/** 搜索项之间的间距, 默认: 20 */
searchGutter: number;
/** 搜索项label的宽度, 默认: 80 */
searchLabelWidth: number;
/** 搜索项label的定位, 默认: 'right' */
searchLabelPosition: AvueAlignment;
/** 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，对cascader|tree类型组件生效, 默认: false */
searchCheckStrictly: boolean;
/** 搜索按钮的长度, 默认: 6 */
searchMenuSpan: number;
/**
* 搜索按钮的位置, 默认: 'center'
* @since 2.7.9
*/
searchMenuPosition: AvueAlignment;
/**
* 组件尺寸
* @since 2.7.9
*/
searchSize: AvueComponentSize;
/** 搜索按钮文案, 默认: '搜索' */
searchBtnText: string;
/** 搜索按钮图标, 默认: 'el-icon-search' */
searchBtnIcon: string;
/** 是否显示搜索按钮, 默认: true */
searchBtn: boolean;
/** 是否显示清空按钮, 默认: true */
emptyBtn: boolean;
/** 清空按钮文案, 默认: '清空' */
emptyBtnText: string;
/** 清空按钮图标, 默认: 'el-icon-delete' */
emptyBtnIcon: string;
}
/** 表格组件配置属性 */
export type CrudOption = Partial<CrudBaseOption> &
Partial<CurdMenuOption> &
Partial<CrudActionOption> &
Partial<CrudRowActionOption> &
Partial<CrudDialogOption> &
Partial<CrudSearchOption> & {
/** 分组配置 */
group?: {
/** 分组名称 */
label: string;
/** 弹出表单的label宽度, 默认: 90 */
labelWidth?: number;
/** 分组字段 */
prop?: string;
/** 分组图标 */
icon?: string;
/** 是否分组折叠, 默认: true */
arrow?: boolean;
/** 分组默认叠起, 默认: false */
collapse?: boolean;
/** 分组下的字段配置*/
column: AvueCrudColumn[];
}[];
/** 表格列配置属性*/
column?: AvueCrudColumn[];
};
三、结语
以上是目前总结出会经常使用的重要属性，希望大家能顺利使用AVUE~