初识前端搬砖神器--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 AvueFormBaseColumnextends 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~

初识前端搬砖神器--AVUE相关推荐

小芒果键盘鼠标连点器搬砖神器工作室专用键盘录制鼠标录制正式发布啦
[一个视频就学会了][键盘鼠标连点器]的使用详细教程 v1.01更新: 1.修复一些存在的问题 2.紧急修复[特殊模式1]防检测能力 --------------------------------- ...
搬砖神器 VScode
记得在实验室的时候,有一位师兄是忠实 vim 党,鄙视一些 ide.的确,熟练掌握各种 vim 命令的大神,用起 vim 来可以秀得天花乱坠,vim 的轻巧也使得启动变得非常的轻易.不过 ide 也有 ...
小芒果多开多窗口同步器键搬砖神器工作室专用鼠连点器键盘连点器鼠标连点器
[高性能][低延迟]虚拟机同步器操作键盘鼠标同步器 v1.24更新: 1.优化虚拟机同步模式的使用体验,提高同步性能 2.大幅度降低虚拟机同步模式的延迟,几乎无延迟,性能比肩(向日葵.todesk等名 ...
「表面光鲜，实则搬砖」，机器学习社区自嘲不为人知的AI工程师真相
贾浩楠发自凹非寺量子位报道 | 公众号 QbitAI 机器学习工程师岗位,还香吗? 在培训机构或求职网站随便一搜,机器学习简直不要更热. 但是,国外的同行们却在一则Reddit热帖上,吐槽揭露 ...
谁再瞧不起搬砖的我。。
面向过去,搬砖这个词经常被人提起.说到搬砖你会想到什么?农民工啊,没读书,没文化的人才去搬砖的.小时候读初中高中的时候,学校经常有一些建筑工地,老师经常说你不好好考试,考个好高中好大学,你出来只能搬砖 ...
搬砖之路----MusicPlayer 一个基于Vlc（2.0+）开发的android音乐播放器--浅析在android开发过程中播放器选择之路！
前言 MusicPlayer 是一款基于vlc播放器开发的一个音乐播放器,你也可以理解为在此核心上的搬砖之路,核心的内容并不是我写的,因此在正式写blog之前,感谢那些vlc核心的开发人员让我用到这么 ...
mac + iterm + 远程开发快捷键和工具--戴上手套搬砖
文章目录 @[toc] 前言: A.why 快捷键? B.why 工具? 一.mac 1.1 打开程序 1.2 触控技巧 1.3 键位修改 1.4 为 App 自定义快捷键的方法 1.5 常用快捷键 ...
风控大佬的一天从这两张报表开始(搬砖)了
我知道,作为一位普通的风控人,其实大家都是搬砖的,能搬一天是一天,特别是今年形势不太友好,能撞一天钟就赚一天,以前的我真的就是这样觉得的. 但直到我看到某些风控大佬,直到那时我才知道:搬砖也是门技术活 ...
一个码农搬砖3年的总结
毕业三年了,搬砖生涯第一阶段已经结束,回顾一下纯粹技术学习方面的经历(不谈职场厚黑学以及政治话题,嘿嘿),仅与各位看官共分享,同进步在校重基础上面5个字,吐血箴言,别被导师忽悠,跟着做一些鸡毛项目 ...

初识前端搬砖神器--AVUE

一、前言

二、各参数意义

三、结语

初识前端搬砖神器--AVUE相关推荐

最新文章

热门文章