basecloud

项目简介

BaseCloud是一套基于uniapp、uniCloud、uni-id的全栈开发框架，不依赖任何第三方框架，极度精简轻巧。

在开发前端界面时，除了适配移动端外，它对PC端也做了良好的适配；

在开发云函数时，它可以为您提供拦截器配置、路由管理、分页、列表、单数据快速查询等功能。除此之外，对于一些业务开发中的常用函数也已做好封装，拿来即用。

在BaseCloud的初始化项目模板中，为您实现了贯穿前后端的业务模块：管理员登录、用户管理、菜单管理、角色与权限管理、操作日志、系统参数配置等项目通用的基础后台管理功能，这一切全都基于云函数开发。

项目价值

基于BaseCloud的快速开发UI样式库，可以快速拼装前端界面，高还原度实现设计图效果，兼顾高效与灵活。

基于BaseCloud的云函数公用模块，你可以轻松实现单云函数、多云函数的路由管理、请求拦截管理与权限控制、常用业务函数快速开发。

基于BaseCloud的客户端缓存管理机制，你可以大幅度减少应用的云函数重复调用请求，未来云函数开始计费后，至少节省应用50%的流量费用。

基于BaseCloud的管理后台基础项目框架，你可以快速初始化一套自带用户、菜单、角色、权限、操作日志、系统参数管理的管理后台项目，在此基础上开始你的项目开发。

当然，这一切都只是刚刚开始，未来我们会基于BaseCloud推出更多贯穿前后端的业务模板，只要您的项目是基于BaseCloud框架，所有的业务模板拿来即用，5分钟快速集成到项目内，无需重复开发前端和后端。

对于开发者而言，基于BaseCloud的全栈快速开发框架，你可以封装自己的贯穿前后端的业务模块，发布到付费业务模块插件市场。 对于企业而言，基于BaseCloud的全栈快速开发框架，无需再费心招募不同工种不同技术栈的工程师，您只需要找到熟悉BaseCloud的工程师，让他们各自独立负责一个业务模块。 未来基于BaseCloud的项目，将会被拆分成几十个甚至上百个独立的模块，每个模块由一个工程师从前端到后端全链路负责，而他只需要懂一门开发语言：javascript，熟悉一个框架：BaseCloud。 项目交付后，您更无须担心后期维护与迭代更新，基于BaseCloud统一的开发规范，您可以很轻松找到随时能够接管您的项目的工程师。

使用说明文档

BaseCloud快速上手使用说明文档 <<

安装方式

方式一：插件市场使用HbuilderX导入示例项目。

方式二：从Gitee clone：Gitee链接，欢迎star、fork，关注最新动态 <<

https://gitee.com/phoooob/BaseCloud.git

方式三：从npm安装：npm地址 <<

npm i basecloud

更新升级

BaseCloud一键更新升级方法说明 <<

业务模块快速集成 - 持续开发中

1. 用户端-手机号码登录业务模块 <<
2. 用户端-APP版本检测更新业务模块（含管理端功能） <<
3. 管理端-数据字典业务模块 <<
4. 统一下单支付业务模块 <<

BaseCloud项目构成

1. common>base-cloud.scss 基础样式库，适配移动端和PC端，22kb。
2. common>js>base-cloud-client.js 客户端SDK，14.2kb。
3. cloudfunctions>common>base-cloud 云函数公共模块，13.9kb。
4. components PC端常用业务组件目录

项目预览

管理后台演示项目地址：https://base-cloud.joiny.cn <<

账号：admin 密码：123123123

快速开始

1. 请先下载BaseCloud管理后台项目模板，并导入到Hbuilder中
2. 右键点击cloudfunctions目录，选择一个服务空间，支持阿里云、腾讯云。
3. 找到cloudfunctions目录下的db_init.json数据库初始化文件，右键选择“初始化数据库”。
4. 右键点击cloudfunctions目录，选择上传所有云函数以及公共模块。
5. 点击运行到浏览器，运行成功后，在浏览器中进入登录页，初始账号：admin ，初始密码：123123123
6. !!!!特别注意：如果您初次从插件市场导入项目，由于npm install创建的软链接失效，修改公共模块中的代码将不会同步更新到云函数中， 例如：修改common > base-cloud > config.js 中的拦截器配置信息，amdin函数中的node_modules > base-cloud > config.js 可能不会同步更改， 如果遇到这种情况请删除admin > node_modules和admin > package-lock.json,然后重新安装admin函数的公共模块：

在要引入公用模块的云函数目录，执行npm init -y生成package.json文件。 执行npm install ../common/base-cloud引入base-cloud模块。

BaseCloud用户交流QQ群：

如果你想入手云开发，本框架是绝佳的学习素材和项目快速搭建方案，学习过程中有问题，快来群里提问，专业客服妹子秒回复。

群号：649807152

点击链接，直接加入qq群 <<

项目结构介绍

请务必对照仔细浏览项目目录介绍，您阅读本项目的文档将会事半功倍。

服务端项目目录

├── cloudfunctions───────────# 云函数目录
│ 		└── admin──────────────────# 管理后台业务函数
│			  └── controller──────────────────# 管理后台业务函数根目录
│					└── menu.js────────────────────────# 菜单管理业务函数
│					└── operateLog.js──────────────────# 操作日志业务函数与接口
│					└── paramConfig.js─────────────────# 系统参数配置业务函数
│					└── role.js────────────────────────# 角色管理业务函数
│			  └── node_modules──────────────────# admin函数依赖公共模块
│			  └── index.js──────────────────────# admin函数入口文件
│ 		└── api────────────────────# 用户端业务函数
│ 		└── user-center────────────# 用户相关业务函数
            └── user.js────────────────────────# 用户管理业务函数
│ 		└── clearlogs──────────────# 过期操作日志清理定时任务函数
│ 		└── curl──────────────# URL化云函数
│ 		└── common─────────────────# 公共模块
│				└── base-cloud──────────────────# base-cloud公共模块
│						└── intercepters──────────────────# 拦截器函数目录
│								└── loginInter.js─────────────────# 用户登录状态拦截拦截函数
│								└── authInter.js──────────────────# 用户权限拦截拦截函数
│						└── base-cloud-config.js──────────────────# 公共模块配置文件，注册全局拦截器（重要！）		
│						└── index.js──────────────────────# BaseCloud公共模块源码，开发阶段无需关心	
│		└── db_init.json───────────# 数据库初始化文件，包含数据表和初始化数据

客户端项目目录

├── cloudfunctions────────# 云函数目录...
├── common────────────────# 静态资源文件目录
│ 		└── js──────────────────# js文件目录
│			  └── base-cloud-client.js─────────────────# BaseCloud客户端SDK
│			  └── clipBoard.js─────────────────────────# 支持web端复制API
│			  └── md5.js───────────────────────────────# MD5加密函数，用于密码加密传输，客户端数据缓存等场景
│ 		└── base-cloud.scss────────────────────# BaseCloud样式类库入口文件
│ 		└── base-cloud-font.scss───────────────# BaseCloud图标样式文件
│ 		└── base-cloud-mobile.scss─────────────# BaseCloud移动端样式文件
│ 		└── base-cloud-pc.scss─────────────────# BaseCloud适配PC端样式文件
├── pages────────────────# 页面
├── static───────────────# 图片静态资源文件目录
├── uni.scss─────────────# scss变量配置文件

管理后台业务模块云函数目录结构

├── cloudfunctions─────────────────# 云函数目录
        └── user-center──────────────────# 用户相关业务函数
│				└── controller──────────────────# 用户相关业务函数根目录
                        └── user.js────────────────────────# 用户管理业务函数
│								└── login()──────────────────────────# 登录接口
│								└── checkToken()─────────────────────# token验证接口
│								└── logout()─────────────────────────# 退出登录接口
│								└── changeStatus()───────────────────# 切换用户禁用状态接口
│								└── info()───────────────────────────# 用户信息查询接口
│								└── save()───────────────────────────# 保存、更新用户信息接口
│								└── myInfo()─────────────────────────# 当前用户信息接口
│								└── modify()─────────────────────────# 修改当前用户信息(含密码)接口
│								└── list()───────────────────────────# 用户列表查询接口
│								└── delete()─────────────────────────# 删除用户接口
│ 		└── admin──────────────────# 管理后台业务函数
│				└── controller──────────────────# 管理后台业务函数根目录
│						└── menu.js────────────────────────# 菜单管理业务函数
│								└── listByType()─────────────────────# 根据菜单类型查询菜单列表接口
│								└── globalData()─────────────────────# 查询登录用户信息、权限菜单列表接口
│								└── info()───────────────────────────# 查询菜单信息接口
│								└── save()───────────────────────────# 保存、更新菜单信息接口
│								└── delete()─────────────────────────# 删除菜单信息接口
│								└── list()───────────────────────────# 菜单列表查询接口
│						└── operateLog.js──────────────────# 操作日志业务函数与接口
│						└── paramConfig.js─────────────────# 系统参数配置业务函数
│								└── info()───────────────────────────# 查询参数配置项信息接口
│								└── save()───────────────────────────# 保存、更新参数配置项信息接口
│								└── delete()─────────────────────────# 删除参数配置项接口
│								└── list()───────────────────────────# 参数配置项列表查询接口
│						└── role.js────────────────────────# 角色管理业务函数
│								└── info()───────────────────────────# 查询角色信息接口
│								└── save()───────────────────────────# 保存、更新角色信息接口
│								└── delete()─────────────────────────# 删除角色接口
│								└── list()───────────────────────────# 角色列表查询接口
│								└── options()────────────────────────# 角色选项列表查询接口（供用户角色选择时使用）
│						
│				└── node_modules──────────────────# admin函数依赖公共模块
│				└── index.js──────────────────────# admin函数入口文件

PC端组件使用说明文档

【auth 组件】

用于用户权限控制，当用户拥有操作权限时展现，否则不展现该元素。

关于权限控制的业务逻辑：用户登录成功后，读取该用户所属角色拥有的权限菜单列表，存储到本地，键名为menuList，权限判断就是基于menuList进行的判断。

属性	必填	默认值	可选值	示例值	说明
url	是	无		user-center/user/save	权限路径,该路径可包含参数，需在t_menu表中已添加数据
noAuth	否	false	true	false	无权限时展现
isInline	否	true	true	false	是否内联元素，如需以其他display方式展示时，设置为false，组件内部不再追加display:inline-block内联样式。

<auth url="user-center/user/save">
 
   <navigator url="/pages/user/userEdit">编辑</navigator>	
   
</auth>

【auth-btn 组件】

用于用户权限控制，当用户拥有操作权限时展现，否则不展现该元素。点击按钮时，会发送请求。

属性	必填	默认值	可选值	示例值	说明
url	是	无		user-center/user/changeStatus?id=1	发送请求的路径，可以携带参数
params	否	无	json类型	:params="{id:1}"	发送请求时携带的参数
noAuth	否	false	true	false	无权限时展现
isInline	否	true	true	false	是否内联元素，如需以其他display方式展示时，设置为false，组件内部不再追加display:inline-block内联样式。
confirm	否	无		confirm="delete"	发送请求之前的确认文字，如果是删除类请求需要确认，可以简写为delete
alert	否	无			请求成功后弹窗的文字
showFail	否	true			请求失败后，是否提示服务端返回的msg字段
@success	否	无			请求成功后回调函数
@fail	否	无			请求失败后回调函数

<auth-btn url="user-center/user/changeStatus" :params="{id:1}">
   禁用
</auth-btn>

【auth-nav 组件】

用于用户权限控制，当用户拥有操作权限时展现，否则不展现该元素。点击按钮时，会进行页面跳转。

属性	必填	默认值	可选值	示例值	说明
url	是	无		user-center/user/changeStatus?id=1	是否具有权限的路径
noAuth	否	false	true	false	无权限时展现
isInline	否	true	true	false	是否内联元素，如需以其他display方式展示时，设置为false，组件内部不再追加display:inline-block内联样式。
href	是	无			要跳转的页面的链接，可以包含参数

<auth-nav :href="`/pages/user/userEdit?id=${item._id}`" url="user-center/user/save" >
   编辑
</auth-nav>

【switch-btn 组件】

用于权限控制的开关切换按钮，无权限仅展示，不可发送请求。

属性	类型	说明
url	String	权限地址，也是点击切换时的请求地址，可以携带参数，如无地址或无权限，则不可点击
params	json	请求参数，有权限时，点击切换即可发送请求
checked	Boolean	开关是否打开
disabled	Boolean	开关是否禁用
color	String	颜色，默认#07c160

【switchs 组件】

属性	类型	说明
name	String	表单的name
value	Boolean	开关是否打开
tip	String	开关右侧的提示文字
disabled	Boolean	开关是否禁用
color	String	颜色，默认#07c160
title	String	表单标题，不要标题，请设置titleWidth=0
titleWidth	Number	表单的左侧标题占位的宽度
isVertical	Boolean	标题和开关是否垂直排列
@change		checked 改变时触发 change 事件，event.detail={ value:checked}

【checkboxs 组件】

复选框组件，用于多选，支持v-model

属性	必填	默认值	可选值	示例值	说明
title	否				表单标题，不要标题，请设置titleWidth=0
titleWidth	否	90	数值即可	100	复选框表单的左侧标题占位的宽度
name	是				表单的name
titleName	否				如果需要选中选项的标题也传服务端，请定义该字段
value	否			value='1,2,3,5'	表单的value，支持v-model绑定，可以是数组，也可以是用英文逗号分开的多个值
list	是			[{title:"搞笑",value:1},{title:"言情",value:2}]	选项列表，数组
titleKey	否	title			选项列表中，对用户展示的文字的键值对的键名
valueKey	否	value			选项列表中，对作为选项值的键值对的键名
disabledKey	否	disabled			选项列表中，表示当前选项禁用的键值对的键名
color	否	#07c160			复选框的颜色
isVertical	否	false			标题和复选框是否垂直排列
@change					当选项发生改变时触发的回调函数

<checkboxs title="角色" :list="roleList" name="x.roleIds|请选择角色" :value="data.roleIds" 
titleName="x.roleNames" titleKey="name" valueKey="_id"></checkboxs>

【radios 组件】

单选框组件，用于单选，支持v-model

属性	必填	默认值	可选值	示例值	说明
title	否				表单标题
titleWidth	否	90	数值即可	100	左侧标题的宽度
name	是				表单的name
titleName	否				如果需要选中选项的标题也传服务端，请定义该字段
value	否				表单的value，支持v-model绑定
list	是			[{title:"搞笑",value:1},{title:"言情",value:2}]	选项列表，数组
titleKey	否	title			选项列表中，对用户展示的文字的键值对的键名
valueKey	否	value			选项列表中，对作为选项值的键值对的键名
disabledKey	否	disabled			选项列表中，表示当前选项禁用的键值对的键名
color	否	#07c160			复选框的颜色
isVertical	否	false			标题和复选框是否垂直排列
defaultFirst	否	true			当value无值时，是否默认选中第一个选项
@change					当选项发生改变时触发的回调函数

<radios title="菜单类型" :list="menuTypeList" :value="data.type" 
name="x.type|菜单类型" @change="chooseMenuType"></radios>

【multi-selects 组件】

下拉多选组件，用于多选，支持v-model，可以搜索关键字筛选

属性	必填	默认值	可选值	示例值	说明
title	否				表单标题
titleWidth	否	90	数值即可	100	左侧标题的宽度
name	是				表单的name
titleName	否				如果需要选中选项的标题也传服务端，请定义该字段
value	否			value='1,2,3,5'	表单的value，支持v-model绑定,可以是数组，也可以是用英文逗号分开的多个值
list	是			[{title:"搞笑",value:1},{title:"言情",value:2}]	选项列表，数组
titleKey	否	title			选项列表中，对用户展示的文字的键值对的键名
valueKey	否	value			选项列表中，对作为选项值的键值对的键名
remarkKey	否	remark			选项列表中，对作为副标题的键值对的键名
disabledKey	否	disabled			选项列表中，表示当前选项禁用的键值对的键名
color	否	#07c160			颜色
isVertical	否	false			标题和选择框是否垂直排列
@change					当选项发生改变时触发的回调函数

<multi-selects title="角色" :list="roleList" name="x.roleIds|请选择角色" 
:value="data.roleIds" titleName="x.roleNames" titleKey="name" valueKey="_id"></multi-selects>

【selects 组件】

下拉单选组件，用于单选，支持v-model，可以搜索关键字筛选

属性	必填	默认值	可选值	示例值	说明
title	否				表单标题
titleWidth	否	90	数值即可	100	左侧标题的宽度
name	是				表单的name
titleName	否				如果需要选中选项的标题也传服务端，请定义该字段
value	否				表单的value，支持v-model绑定
list	是			[{title:"搞笑",value:1},{title:"言情",value:2}]	选项列表，数组
titleKey	否	title			选项列表中，对用户展示的文字的键值对的键名
valueKey	否	value			选项列表中，对作为选项值的键值对的键名
remarkKey	否	remark			选项列表中，对作为副标题的键值对的键名
disabledKey	否	disabled			选项列表中，表示当前选项禁用的键值对的键名
color	否	#07c160			颜色
isVertical	否	false			标题和选择框是否垂直排列
@change					当选项发生改变时触发的回调函数

<selects title="父级菜单" :list="parentMenuList" name="x.parentId" 
:value="data.parentId" titleKey="name" valueKey="_id"></selects>

【inputs 组件】

输入框组件，type支持hidden类型，输入框有内容时，可以点击清空图标清空。

属性	必填	默认值	可选值	示例值	说明
title	否				表单标题
titleWidth	否	90	数值即可	100	左侧标题的宽度
name	是				表单的name
value	否				表单的value，支持v-model绑定
hiddenValue	否				传入该值时，输入框将变为禁用状态，对用户展示value的值，hiddenValue将会传到服务端
type	否	text	text、number、hidden		表单类型，支持hidden
addOn	否				输入框右侧的文字块的文字
addOnLeft	否				输入框左侧的文字块的文字
isVertical	否	false			标题和输入框是否垂直排列
showClearIcon	否	true			是否显示清空图标
@tapAddOn					当点击输入框右侧文字块时触发的回调函数
@tapAddOnLeft					当点击输入框左侧文字块时触发的回调函数
其他属性与事件					与input组件一致

<inputs name="x.name|用户名" title="用户名" :value="data.name" :hiddenValue="data._id"></inputs>

【textareas 组件】

属性	必填	默认值	可选值	示例值	说明
title	否				表单标题
titleWidth	否	90	数值即可	100	左侧标题的宽度
name	是				表单的name
value	否				表单的value，支持v-model绑定
isVertical	否	false			标题和文本框是否垂直排列
showClearIcon	否	true			是否显示清空图标
autoHeight	否	false			是否自适应高度
height	否	100			非自适应高度时的高度
其他属性与事件					与textarea组件一致

<textareas title="权限地址" @blur="inputBlur" name="x.url|权限地址" 
:value="data.url" placeholder="多个权限地址请用英文分号隔开"></textareas>

【datepicker 组件】

属性	类型	说明
showIcon	Boolean	是否显示右侧的日历图标，默认true
name	String	表单的name
endName	String	表单的endName，如果是时间范围，表示结束时间的name
value	String,Array	默认选中的日期，也是提交表单时的默认值，支持数组，如果是字符串的话，可以是用英文逗号分开的两个时间（开始和结束时间）
name	String	表单的name
valueType	String	表单的value的类型，string
placeholder	String	未选择日期时，显示的文字
color	String	日历的颜色
showSeconds	Boolean	是否显示秒
type	String	时间类型：rangetime、range、time、date、datetime
format	String	初始日期格式
showHoliday	Boolean	显示公历节日
showTips	Boolean	显示提示
beginText	String	开始时间的文字，默认为：开始
endText	String	结束时间的文字，默认为：结束
title	String	表单标题
titleWidth	Number	左侧标题的宽度
isVertical	Boolean	标题和文本框是否垂直排列

【conditions 组件】

分页筛选条件组件

属性	必填	默认值	可选值	示例值	说明
list	否			{title:"用户名",name:"name"},{title:"状态",name:"status",type:"select",list:[]}	筛选条件,数组，基本属性为：name、title、type、list，详见/pages/user/userList示例
conditions	否	{}	json		当前的筛选条件
confirmText	否	筛选			筛选按钮的文字
showFirst	否	false			是否对外显示第一个筛选项
showCount	否	0			对外显示前面多少个筛选项
@confirm					确认筛选时的回调事件，e.conditions

<conditions :conditions="conditions" :list="conditonList" @confirm="submitSearch"></conditions>

data() {
    return {
        conditonList:[
            {title:"用户名",name:"name"}, //默认是输入框类型的，只需提供这两个属性即可
            //如果是下拉选择类型的，则需要提供list属性，两个键值对：title、value
            {title:"状态",name:"status",type:"select",list:[{title:"正常",value:0},{title:"禁用",value:1}]}, 
            //日期类型的筛选条件：可以配置name和endName，表示开始和结束时间，timeType是指日期格式，valueType可选为string字符串类型或timestamp时间戳类型（推荐）：
            /**
             * rangetime 时间范围，精确到分钟
             * range 时间范围，精确到天
             * time 时间，小时：分钟
             * date 日期，年-月-日
             * datetime 日期时间，精确到分钟
             */
            //showSeconds属性表示是否显示秒，任何日期格式都可以搭配这个属性使用。
            {title:"时间",name:"startTime",endName:"endTime",type:"time",timeType:"rangetime",showSeconds:true,valueType:'timestamp'},
        ],
        conditions:{
            name : ""
        }
    }
},

【copy 组件】

一键复制的功能

属性	说明
text	要复制的文字内容
showIcon	文字右侧是否显示复制图标，默认true

<copy :text="data.text" :showIcon="false"></copy>

【empty 组件】

属性	类型	说明
list	Array	列表数据，用于判断是否为空，展示数据为空的提示
loading	Boolean	是否加载中，加载中的时候，会显示加载中的动画
tips	String	当数据为空时的提示文字，默认：抱歉，暂无数据~

<empty :list="list" :loading="loading"></empty>

【images 组件 - 已废弃，由files组件替代】

图片显示、预览组件

属性	类型	说明
width	Number	图片的宽度
isRound	Boolean	是否是圆形图片，否则是方形图片，默认false
list	String，Array	要展示的图片列表，可以是图片链接数组，也可以是英文逗号分开的多个图片链接，如果是json数组，需要指定valueKey
valueKey	String	要展示的图片数据如果是json数组，可以通过该属性指定json数据中的哪个键名为图片链接
count	Number	要展示的图片的数量，超出数量不展示，-1为不限制，默认-1
disabled	Boolean	是否显示右上角的删除按钮，是否可以编辑，默认false
@remove		当删除图片时触发回调

【files 组件 】

文件显示、预览组件，支持图片、视频、音频三种类型的文件

属性	类型	说明
width	Number	宽度
type	String	类型：image、video、audio、pdf、apk、zip，默认为image
width	Number	宽度，单位px，默认80
isRound	Boolean	是否是圆形，否则是方形，默认false
list	String，Array	要展示的文件列表，可以是文件链接数组，也可以是英文逗号分开的多个文件链接，如果是json数组，需要指定valueKey
valueKey	String	要展示的文件数据如果是json数组，可以通过该属性指定json数据中的哪个键名为文件链接
count	Number	要展示的文件的数量，超出数量不展示，-1为不限制，默认-1
disabled	Boolean	是否显示右上角的删除按钮，是否可以编辑，默认false
@remove		当删除文件时触发回调

【labels 组件】

表单标题组件，主要为了对齐其他的表单布局使用

属性	必填	默认值	可选值	示例值	说明
title	否				表单标题
titleWidth	否	90	数值即可	100	左侧标题的宽度
isVertical	否	false			标题和文本框是否垂直排列
isTop	否	false			标题与右侧是否顶部对齐，否则垂直对齐

【layout 组件】

布局组件，所有页面使用

属性	类型	说明
title	String	当前页面的标题
loading	Boolean	是否加载中，加载中的时候，会显示加载中的动画
innerScroll	Boolean	区域内容是否内部滚动，默认true
pageKey	String	当前页面的唯一标识，用于左侧菜单显示选中状态
slot="titleLeft"		标题行左侧位置的插槽
slot="titleRight"		标题行右侧位置的插槽

【mores 组件】

当文本内容为多行时，只显示一行，点击该文字，可以展示显示全部，再次点击则收起。

<mores>{{item.content}}</mores>

【paginate 组件】

分页器组件，需要传入pageNumber（页码）属性和page（分页数据）属性。其中page属性详细结构如下，在BaseCloud的公共模块已对分页数据做了封装，直接调用即可返回该数据结构：

page: {
    pageNumber: 1, //页码
    lastPage: true, //是否最后一页
    totalPage: 1, //总页码
    list: [], //列表数据
    totalRow: 0, //总数据条数
    pageSize: 10 //每页条数
},

该组件会触发一个回调函数@switchPage，返回数据结构如下：

{
    pageSizeChanged : true , //每页数据条数是否切换
    pageNumber :  1 , //页码
    pageSize : 5 //每页数据条数
}

【tables 组件】

属性	类型	说明
list	Array	列表数据
showEmpty	Boolean	如果列表数据为空，是否展示暂无数据提示
slot="thead"		表格的标题栏，无须写tr
slot="tbody"		表格的内容

<tables :list="list">
    <block slot="thead">
        <th>角色名称</th>
        <th>类型</th>
        <th class="autoWidth">权限描述</th>
        <th>操作</th>
    </block>
    <block slot="tbody">
        <tr v-for="( x , index) in list" :key="index">
            <td>{{x.name}}</td>
            <td>{{x.typeStr}}</td>
            <td>{{x.remark}}</td>
            <td>
                <auth-nav :href="`/pages/role/roleEdit?id=${x._id}`" 
                url="admin/role/info" class="main bold plr5">
                    编辑
                </auth-nav>
                
                <auth-btn :url="`admin/role/delete?id=${x._id}`" confirm="delete" 
                @success="remove(index)" class="main bold plr5">
                    删除
                </auth-btn>
            </td>
        </tr>
    </block>
</tables>

【upload-images 组件，已废弃，由uploads组件替代】

图片上传组件，直接上传到云储存，支持多张图片上传

属性	类型	说明
count	Number	最多可以上传多少张图片，默认不限制-1
name	String	表单的name
value	Array	默认显示的图片列表，可以是数组，也可以是英文逗号分割的图片地址，也可以通过valueKey来指定对象类型的图片数据的图片链接键名
valueKey	String	如果value为数组并且每个图片对应的数据是一个json对象，可以通过valueKey来指定图片的链接对应的键名。指定了valueKey后，表单提交的value将会是一个JSON字符串型的数组。
deleteUrl	String	当删除图片时，如果有配置删除的请求地址，则会向该地址发送请求，传入fileID参数，从云存储删掉该图片
@change		图片上传或删除时的回调，e.detail.value为图片链接数组，e.detail.files为包含图片详细信息的数组（不指定valueKey时默认图片链接为url字段）
@delete		图片删除成功的回调

【uploads 组件】

图片、音频、视频上传组件，直接上传到云储存，图片支持多张图片上传，其他文件每次只能上传一个，可以多次上传。

属性	类型	说明
type	String	文件类型：image、video、audio、pdf、apk、zip，默认image
maxDuration	Number	上传音频、视频的时长，单位：秒，默认600
count	Number	最多可以上传多少个文件，默认不限制-1
width	Number	宽度，单位px，默认80
name	String	表单的name
value	Array、String	默认显示的文件列表，可以是数组，也可以是英文逗号分割的文件地址，也可以通过valueKey来指定对象类型的文件数据的文件链接键名
valueKey	String	如果value为数组并且每个文件对应的数据是一个json对象，可以通过valueKey来指定文件的链接对应的键名。指定了valueKey后，表单提交的value将会是一个JSON字符串型的数组。
parseArray	boolean	未指定valueKey时，可通过设置parseArray:true来指定提交的value为数组类型，v2.1.4+支持
deleteUrl	String	当删除文件时，如果有配置删除的请求地址，则会向该地址发送请求，传入fileID参数，从云存储删掉该文件
@change		文件上传或删除时的回调，e.detail.value为文件链接数组，e.detail.files为包含文件详细信息的数组（不指定valueKey时默认文件链接为url字段）
@delete		文件删除成功的回调，e.detail.value为文件链接，e.detail.index为文件在数组中的下标，e.detail.file为文件

//指定valueKey时，需要传入的value为一个数组或字符串数组，数组中每个元素为json对象
<uploads title="头像" name="x.avatar" valueKey="src" type="image" v-model="data.avatar" :count="1"></uploads>

export default {
    data() {
        return {
            data : {
                //可以为数组，也可以为字符串化的数组
                avatar : [
                    {
                        src : 'http://xxxx.com/xx.jpg' , //必填属性
                        size : 2501 //其他选填属性...
                    }
                ]
            }
        }
    },
}

【quote 组件】

一段引用语、提示语

属性	类型	说明
title	String	标题
color	String	颜色，默认主题色

【alerts 弹窗组件】

模态框，弹窗

属性	类型	说明
title	String	标题
width	String	弹窗宽度，支持px和%单位，默认50%。
height	String	弹窗高度，支持px和%单位，默认80%。
slot="top"	slot	插入弹窗顶部的内容，如果仅显示标题文字不满足需要，可以自定义这块的内容
slot="bottom"	slot	插入弹窗底部的内容，一般按钮放这里

参考如下代码显示弹窗：

//定义弹窗的ref属性为alerts或其他自定义的名字
<alerts ref="alerts"></alerts>

showAlerts:function(){
    this.$refs.alerts.show(); //显示弹窗
    this.refs.alerts.hide();
}