前言

Avue的v2版本是一个基于element-ui低代码前端框架,Avue的v3是一个基于element-plus低代码前端框架,它使用 JSON 配置来生成页面,可以减少页面开发工作量,极大提升效率。avue对于后台管理系统的开发极其便捷,就是配置不容易记住,熟练该框架配置来开发会好点,不然真不如直接用element来开发的好,以下以v2为例。

安装

npm、yarn安装npm i @smallwei/avue -Syarn add @smallwei/avue -S或CDN在线安装

引入

通过CDN安装的,会挂载在全局属性AVUE下,通过 Vue.use(AVUE) 注册。

import Avue from '@smallwei/avue';import '@smallwei/avue/lib/index.css';Vue.use(Avue);

全局配置

Vue.use(AVUE,{  size:'', // 组件的尺寸,默认small。可选值 small/mini/medium  tableSize:'', //   formSize:'', //   appendToBody:true, //  modalAppendToBody:true, //   menuType:'', // 用于改变操作栏菜单按钮类型性,属性的组件的默认尺寸均为 text。可选值 button/icon/text/menu  qiniu:{ // 七牛云配置  AK: '',    SK: '',    scope: '',    url: '',    deadline: 1 },  ali:{ // 阿里云配置  region: '',    endpoint: '',    accessKeyId: '',    accessKeySecret: '',    bucket: '',  },  theme:'', // 主题颜色配置,属性的组件的默认白色。可选值 dark  canvas:{ // 水印配置  text: 'avuejs.com',    fontFamily: 'microsoft yahei',    color: "#999",    fontSize: 16,    opacity: 100,    bottom: 10,    right: 10,    ratio: 1  },});

国际化

Avue 采用中文作为默认语言,同时支持多语言切换

import Vue from 'vue'import Avue from '@smallwei/avue'import zhLocale from '@smallwei/avue/lib/locale/lang/zh'import enLocale from '@smallwei/avue/lib/locale/lang/en'Vue.use(Avue, { enLocale })

全局api

$DialogForm弹窗表单

$Clipboard复制到剪切板

$ImagePreview图片预览

$Print 打印插件

$Export excel导出

watermark全局水印

downFile文件下载

deepClone对象深拷贝

validatenull判断空

findNode数组中寻找对象

findArray数组中寻找对象下标

crud 配置项 option

crud 表格回调函数事件

on-load:这个事件会在表格所在的组件加载时就会执行,初始化表格数据。当表格翻页、页码变化时候也会自动执行该方法,使用了这个方法可以省略表格的current-change 、size-change两个回调函数。

current-change:表格页码发生变化时触发,第一个参数为当前页码。

size-change:表格页容量变化时触发,第一个参数就是当前页容量大小。

search-change :表格查询按钮回调函数,默认有两个参数 form与done, form为搜索框的值,done为关闭搜索的刷新状态回调函数。

row-save :表格新增表单确定按钮的回调函数,默认有三个参数分别为:row(表单的值),done(用于关闭表单回调函数),loading(页面loading状态) 。

row-update :表格行编辑确定按钮的回调,默认四个参数 row(当前行),index(索引),done(关闭弹框回调函数),loading(页面loading状态)。

row-del:表格操作行删除按钮回调函数,默认两个参数,row(当前行数据),index(当前索引) 。

refresh-change:表格的刷新按钮回调函数。

current-row-change:当前表格行被点击时的回调函数,第一个参数是当前行数据。

tree-load:表格行展开的懒加载回调,带三个参数 row(当前展开行的数据),treeNode(展开行节点数据),resolve(行懒加载的成功回调函数,在resolve里面将懒加载的数据传出去表格进行渲染)。

before-close:打开前的回调函数,两个参数done(用于关闭Dialog),type(当前窗口类型)。

before-close:关闭前的回调函数,done(用于关闭Dialog),type(当前窗口的类型)。

search-reset:点击清空按钮触发,清空搜索框回调函数。

selection-change:当表格选择项勾选发生变化时会触发该回调函数。

dateChange:dateBtn为true时的选择日期回调函数。

const option = {  'table-loading':'', // 表格等待框的控制  size:'', // 组件尺寸  maxHeight:'', // 表格的最大高度  index:'', // 是否有序号    indexWidth:'', // 序号列宽度    indexFixed:'', // 序号列是否冻结列  menu:'', // 是否有操作栏    menuWidth:'', // 操作栏宽度    menuTitle:'', // 操作栏标题    menuFixed:'', // 操作栏列冻结列    menuType:'', // 操作栏按钮样式    menuHeaderAlign:'', // 操作栏表头的对齐方式  title:'', // 表格标题  addBtn:'', // 表格新增按钮;edit(修改)、del(删除)、view(查看)、update(修改)、save(保存)、cancel(取消)、search(查询)、empty(清空)  addBtnText:'', // 表格新增按钮文案  addBtnIcon:'', // 表格新增按钮图标  printBtn:'', // 表格打印按钮  excelBtn:'', // 表格导出按钮  filterBtn:'', // 表格自定义过滤按钮  refreshBtn:'', // 表格刷新数据按钮  columnBtn:'', // 表格列操作按钮  searchShowBtn:'', // 表格搜索显隐按钮  copyBtn:'', // 表格复制数据按钮  addTitle:'', // 表格新增弹窗标题 edit(修改)、view(查看)  dialogDrag:'', // 表格弹窗是否可以拖拽  searchIndex:'', // 表格搜索半收缩个数  searchPlaceholder:'', // 搜索项辅助文字  searchSpan:'', // 搜索项框栅列  searchGutter:'', // 搜索项框间距  searchLabelWidth:'', // 搜索项标题宽度  searchLabelPosition:'', // 搜索项标题位置  column:[ // 表格列配置    {      label:'', // 列标题      prop:'', // 列标题的内容属性名称      type:'', //       width:'', // 对应列的宽度      minWidth:'', // 对应列的最小宽度      fixed:'', // 列固定      sortable:'', // 对应列是否可以排序,监听 sort-change 回调,true, false, 'custom'      formatter:'', // 格式化列内容,(row, value, row, column)      overHidden:'', // 当内容过长被隐藏时显示 tooltip      align:'', // 对齐方式      headerAlign:'', // 表头对齐方式      filters:'', // 数据过滤的选项      search:'', // 是否为搜索项      searchValue:'', // 搜索项初始化值      searchPlaceholder:'', // 搜索项辅助文字      searchSpan:'', // 搜索项框栅列      searchOrder:'', // 搜索项位置排序,序号越大越靠前      searchLabelWidth:'', // 搜索项标题宽度      searchClearable:'', // 搜索项清除      searchMultiple:'', // 搜索项是否多选      searchTags:'', // 搜索项将选中值按文字的形式展示      display:'', // 弹出表单是否显示      disabled:'', // 弹出表单是否禁止      addDisabled:'', // 表单新增时项是否禁止,edit(编辑)、view(查看)      addDisplay:'', // 表单新增时项是否显示,edit(编辑)、view(查看)      resizable:'', // 对应列是否可以通过拖动改变宽度(需要在option中border属性为真)      searchClearable:'', // 搜索项清除      searchClearable:'', // 搜索项清除      searchClearable:'', // 搜索项清除      dicData:[ // 下拉项字典枚举        {label:'A',value: 'a'},      ],      rules:[ // 表单字段校验规则        {equired: true,message: "请输入姓名",trigger: "blur"},      ],      hide: false, // 隐藏列    }  ],};

自定义内容

       新增         {}">刷新          编辑     删除          自定义新增    自定义修改    取消       // column: [{prop:'name',formslot:true}]    新增      修改      查看      {{user.name?user.name:'暂时没有内容'}}             // column: [{prop:'name',labelslot:true}]      

自定义提示{{error}}

// column: [{prop:'name',errorslot:true}] 姓名